Carlos Rico friday presentation build

.github/copilot-instructions.md

@@ -0,0 +1,47 @@
+# Copilot Instructions for JavaScript Quiz Project
+
+## Project Overview
+This project is a browser-based Quiz application built using JavaScript, Object-Oriented Programming (OOP), and the Document Object Model (DOM). The application is structured to facilitate collaboration and maintain high code quality.
+
+## Architecture
+- **Main Components**:
+  - **Question Class** (`src/Question.js`): Manages individual quiz questions, including properties like text, choices, answer, and difficulty. Implements a method to shuffle answer choices.
+  - **Quiz Class** (`src/Quiz.js`): Handles the overall quiz logic, including tracking questions, managing time limits, and checking answers.
+  - **DOM Interaction** (`src/index.js`): Responsible for rendering the quiz interface, updating the UI based on user interactions, and displaying results.
+
+- **Data Flow**:
+  - The `Quiz` class orchestrates the flow of questions and user interactions, while the `Question` class encapsulates the details of each question.
+
+## Developer Workflows
+- **Building and Testing**:
+  - Use Jasmine for unit testing. Ensure all tests pass before committing changes.
+  - Run tests using the command: `npm test` (if applicable, adjust based on your setup).
+
+- **Debugging**:
+  - Utilize browser developer tools to inspect elements and debug JavaScript code.
+  - Console logging is encouraged for tracking variable states and flow.
+
+## Project Conventions
+- **Code Structure**:
+  - Organize code into classes for clarity and reusability.
+  - Maintain a clean and readable code style with proper indentation and descriptive variable names.
+
+- **File Naming**:
+  - Use camelCase for JavaScript files and classes (e.g., `Question.js`, `Quiz.js`).
+
+## Integration Points
+- **External Dependencies**:
+  - Ensure to include Jasmine for testing. Follow the setup instructions in the `README.md` for proper integration.
+
+- **Cross-Component Communication**:
+  - The `Quiz` class communicates with multiple `Question` instances, managing their lifecycle and interactions.
+
+## Examples of Patterns
+- **Shuffling Choices**:
+  - The `shuffleChoices()` method in the `Question` class demonstrates how to manipulate arrays effectively.
+
+- **Timer Implementation**:
+  - Use `setInterval` and `clearInterval` for managing the quiz timer, as outlined in the `README.md`.
+
+## Conclusion
+This document serves as a foundational guide for AI agents to navigate and contribute effectively to the JavaScript Quiz project. For any unclear sections or additional details needed, please provide feedback for further refinement.

README.md

@@ -1 +1,136 @@
 # Project: JavaScript Quiz
+
+# Quiz App Mini-Project Requirements
+
+## General
+- Build a browser-based Quiz app using JavaScript, OOP, and DOM
+- Work in teams of 2 using Live Share for collaboration
+- Commit changes regularly and push to GitHub
+- Submit the final GitHub repository link
+
+## Code Structure & Quality
+- Use classes to organize data and functionality
+- Keep code clean, readable, and well-organized
+- Use descriptive variable names and proper file structure
+- Remove unused code and maintain correct indentation
+
+## Question Class (src/Question.js)
+- Constructor with: text, choices, answer, difficulty
+- Properties: text, choices, answer, difficulty
+- Implement shuffleChoices() method
+- Pass all Jasmine unit tests
+
+## Quiz Class (src/Quiz.js)
+- Constructor with: questions, timeLimit, timeRemaining
+- Properties: questions, timeLimit, timeRemaining, correctAnswers, currentQuestionIndex
+- Implement methods:
+  - getQuestion()
+  - moveToNextQuestion()
+  - shuffleQuestions()
+  - checkAnswer(answer)
+  - hasEnded()
+  - filterQuestionsByDifficulty(difficulty)
+  - averageDifficulty()
+- Pass all Jasmine unit tests
+
+## DOM & Interaction (index.js)
+- Display current question and choices
+- Update progress bar and question count
+- Handle answer selection and next button
+- Show final results view
+- Implement restart quiz functionality
+
+## Timer
+- Implement countdown timer with setInterval / clearInterval
+- Display remaining time during quiz
+- Stop timer when quiz ends
+- Restart timer when quiz restarts
+
+## Completion
+- All features implemented and working
+- All tests passing
+- Repository ready for submission
+
+
+# Detailed Quiz App Requirements
+
+## Question Class
+
+### Class Definition
+- Question class must be defined
+- Constructor must receive 4 arguments:
+  1. text (string)
+  2. choices (array of strings)
+  3. answer (string)
+  4. difficulty (number)
+
+### Properties
+- text → assigned from 1st argument
+- choices → assigned from 2nd argument
+- answer → assigned from 3rd argument
+- difficulty → assigned from 4th argument
+
+### shuffleChoices() Method
+- Must be defined
+- Must be a function
+- Must receive no arguments
+- Must shuffle the items in the choices array
+
+---
+
+## Quiz Class
+
+### Class Definition
+- Quiz class must be defined
+- Constructor must receive 3 arguments:
+  1. questions (array of Question objects)
+  2. timeLimit (integer)
+  3. timeRemaining (integer)
+
+### Properties
+- questions → assigned from 1st argument
+- timeLimit → assigned from 2nd argument
+- timeRemaining → assigned from 3rd argument
+- correctAnswers → initially 0
+- currentQuestionIndex → initially 0
+
+### getQuestion() Method
+- Must be defined
+- Must be a function
+- Must return questions[currentQuestionIndex]
+
+### moveToNextQuestion() Method
+- Must be defined
+- Must be a function
+- Must increment currentQuestionIndex by 1
+
+### shuffleQuestions() Method
+- Must be defined
+- Must be a function
+- Must shuffle the questions array
+
+### checkAnswer(answer) Method
+- Must be defined
+- Must be a function
+- Must receive 1 argument (answer)
+- Must compare answer with current question’s answer
+- Must increment correctAnswers if answer is correct
+
+### hasEnded() Method
+- Must be defined
+- Must be a function
+- Must return false if currentQuestionIndex < questions.length
+- Must return true if currentQuestionIndex === questions.length
+
+### filterQuestionsByDifficulty(difficulty) Method
+- Must be defined
+- Must be a function
+- Must receive 1 argument (number 1–3)
+- Must filter questions by difficulty
+- Must not modify questions if difficulty is invalid
+
+### averageDifficulty() Method
+- Must be defined
+- Must be a function
+- Must receive no arguments
+- Must return the average difficulty of all questions

index.html

@@ -39,7 +39,9 @@ <h1>JavaScript Quiz</h1>
           <div id="result"></div>
         </div>
         <!-- The below 'Restart Quiz' button is commented out because it is not used initially -->
-        <!-- <button id="restartButton" class="button-secondary">Restart Quiz</button> -->
+
+        <button id="resetBtn" class="button-secondary">Try again</button>
+
       </div>
     </div>