Merge pull request #2 from vivekiyer7/Branch_v1

Application Deployment

README.md

@@ -1,2 +1,69 @@
 # Coding-Quiz
-Coding Quiz Challenge
+Coding Quiz Challenge using JavaScript
+
+## Overview
+
+Welcome to the Coding Quiz Website! This web application allows users to test their coding knowledge through a series of interactive quizzes. The quiz challenges users with code-related questions and provides instant feedback on their answers.
+
+## Table of Contents
+
+- [Features](#features)
+- [Screenshots](#screenshots)
+- [Deployment](#deployment)
+- [How to Use](#how-to-use)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Features
+
+- **Quiz Challenges:** Engage in coding challenges covering various programming topics.
+- **Timer:** A countdown timer adds an element of urgency to the quiz, and incorrect answers result in a time penalty.
+- **Score Tracking:** Keep track of your score as you progress through the quiz.
+- **Highscores:** View and submit your scores to compete with others on the highscores leaderboard.
+
+## Screenshots
+
+![Screenshot1](/assets/images/finished_startquiz_Page.png)
+![Screenshot2](/assets/images/finished_question1_Page.png)
+![Screenshot3](/assets/images/finished_question2_Page.png)
+![Screenshot4](/assets/images/finished_end_quiz.png)
+![Screenshot5](/assets/images/finished_highscores_page.png)
+
+## Deployment
+
+1. Site is live at https://vivekiyer7.github.io/Coding-Quiz/
+
+To run the application locally, follow these steps:
+
+1. Clone the repository: `git clone https://github.com/vivekiyer7/Coding-Quiz.git`
+2. Open the `index.html` file in your preferred browser.
+
+## How to Use
+
+1. Open the web application in your preferred browser.
+2. Quiz is for 75 Sec and has 10 Questions (which ever finish first)
+3. There is a peanlty of 10 Sec if answer is worng.
+4. At the end answer is displayed and can be stored.
+5. Past highscrores can be seen from High-Scores Page.
+
+## Contributing
+
+If you'd like to contribute to this project, please follow these steps:
+
+1. Fork the repository.
+2. Create a new branch: `git checkout -b feature/new-feature`.
+3. Commit your changes: `git commit -m 'Add new feature'`.
+4. Push to the branch: `git push origin feature/new-feature`.
+5. Submit a pull request.
+
+## License
+
+This project is licensed under the [GNU General Public License v3.0](LICENSE).
+
+### Author
+
+Vivek Iyer
+
+---
+
+Made with ❤️️ by Vivek Iyer

assets/Challenge_ReadME.md

@@ -35,7 +35,7 @@ Create a code quiz that contains the following requirements:
 
 The following animation demonstrates the application functionality:
 
-![Animation of code quiz. Presses button to start quiz. Clicks the button for the answer to each question, displays if answer was correct or incorrect. Quiz finishes and displays high scores. User adds their intials, then clears their intials and starts over.](./assets/08-web-apis-challenge-demo.gif)
+![Animation of code quiz. Presses button to start quiz. Clicks the button for the answer to each question, displays if answer was correct or incorrect. Quiz finishes and displays high scores. User adds their intials, then clears their intials and starts over.](./images/08-web-apis-challenge-demo.gif)
 
 ## Grading Requirements
 

assets/css/styles.css

@@ -1,6 +1,7 @@
 body {
   font-family: Arial;
-  font-size: 120%;
+  font-size: 100%;
+  background-color: #f0f0f0;
 }
 
 a {
@@ -42,6 +43,7 @@ ol {
   padding-left: 0px;
   max-height: 400px;
   overflow: auto;
+  text-align: left;
 }
 
 li {
@@ -56,10 +58,12 @@ li:nth-child(odd) {
 .wrapper {
   margin: 100px auto 0 auto;
   max-width: 600px;
+  text-align: center;
 }
 
 .hide {
   display: none;
+  text-align: center;
 }
 
 .start {
@@ -86,3 +90,31 @@ li:nth-child(odd) {
   top: 10px;
   right: 10px;
 }
+
+.flex-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+#questions-title {
+  text-align: center;
+}
+
+.flex-container h2 {
+  text-align: left;
+}
+
+.flex-container h3 {
+  text-align: left;
+  font-style: italic;
+}
+
+#questions-html {
+  display: none;
+}
+
+.separator {
+  border: 1px solid #ccc;
+  margin: 10px 0;
+}

assets/html/highscores.html

@@ -4,20 +4,21 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico">
     <title>Highscores</title>
 
-    <link rel="stylesheet" href="./assets/css/styles.css" />
+    <link rel="stylesheet" href="../css/styles.css" />
   </head>
 
   <body>
     <div class="wrapper">
       <h1>Highscores</h1>
       <ol id="highscores"></ol>
 
-      <a href="index.html"><button>Go Back</button></a>
+      <a href="../../index.html"><button>Go Back</button></a>
       <button id="clear">Clear Highscores</button>
     </div>
 
-    <script src="./assets/js/scores.js"></script>
+    <script src="../js/scores.js"></script>
   </body>
 </html>

assets/js/logic.js

@@ -0,0 +1,142 @@
+document.addEventListener('DOMContentLoaded', function () {
+  // Your existing code here
+  let currentQuestionIndex = 0
+  let score = 0
+  let totalTime = 75
+  let timerDisplay = document.getElementById('time')
+  let timerInterval
+  let startScreen = document.getElementById('start-screen')
+  let questionsContainer = document.getElementById('questions-html')
+  timerDisplay.textContent = totalTime
+  var highscores_link = document.getElementById('highscores_page_link')
+
+  var startBtn = document.querySelector('#start')
+  var submitBtn = document.querySelector('#submit')
+
+  startBtn.addEventListener('click', function () {
+    startQuiz()
+    displayQuestion()
+  })
+
+  submitBtn.addEventListener('click', function () {
+    submit_score()
+  })
+
+  function startQuiz () {
+    updateTimer()
+    timerInterval = setInterval(updateTimer, 1000)
+    // Hide the start screen when the quiz starts
+    startScreen.style.display = 'none'
+    highscores_link.style.display = 'none'
+    // Apply flex styles to center questions when starting the quiz
+    questionsContainer.style.display = 'flex'
+  }
+
+  function updateTimer () {
+    if (totalTime > 0) {
+      totalTime--
+      timerDisplay.textContent = totalTime
+    } else {
+      clearInterval(timerInterval)
+      timerDisplay.textContent = "0 -- Time's Up!"
+      // Hide the questions container
+      questionsContainer.style.display = 'none'
+      endQuiz()
+    }
+  }
+
+  function displayQuestion () {
+    // Assuming you have an array of questions named quizQuestions
+    let question = quizQuestions[currentQuestionIndex]
+
+    // Clear previous question and answer elements
+    let questionTitleEl = document.getElementById('question-title')
+    questionTitleEl.textContent =
+      'Ques:' + `${currentQuestionIndex + 1}: ` + question.question
+
+    let answerheaderEl = document.getElementById('answer-header')
+    answerheaderEl.textContent = 'Options:'
+
+    let choicesContainer = document.getElementById('choices')
+    choicesContainer.innerHTML = '' // Clear previous choices
+
+    // Display each option on a separate line with numbering
+    for (let j = 0; j < question.choices.length; j++) {
+      let choice = question.choices[j]
+
+      let choiceEl = document.createElement('button')
+      choiceEl.textContent = `${j + 1}. ${choice}` // Add numbering
+      choiceEl.addEventListener('click', function () {
+        handleAnswer(choice)
+      })
+
+      choicesContainer.appendChild(choiceEl)
+    }
+  }
+
+  function handleAnswer (answer) {
+    let answerstatusEl = document.getElementById('answer-status')
+
+    // Check if the answer is correct
+    if (answer === quizQuestions[currentQuestionIndex].correctAnswer) {
+      // If the answer is correct, increase the score
+      score++
+      answerstatusEl.textContent = 'Answer Status: Correct'
+      //wait for 2 seconds before moving to next question
+      setTimeout(function () {
+        answerstatusEl.textContent = ''
+      }, 2000)
+    } else {
+      answerstatusEl.textContent = 'Answer Status: Incorrect'
+      //wait for 2 seconds before moving to next question
+      setTimeout(function () {
+        answerstatusEl.textContent = ''
+      }, 2000)
+      // If the answer is wrong, penalize the time
+      totalTime -= 10
+      if (totalTime < 0) {
+        totalTime = 0
+      }
+      timerDisplay.textContent = totalTime
+    }
+
+    // Move to the next question
+    currentQuestionIndex++
+
+    // If there are more questions, display the next one
+    if (currentQuestionIndex < quizQuestions.length) {
+      displayQuestion(currentQuestionIndex)
+    } else {
+      // Hide the questions container
+      questionsContainer.style.display = 'none'
+      endQuiz()
+    }
+  }
+
+  function endQuiz () {
+    // Stop the timer
+    clearInterval(timerInterval)
+
+    // Display the final score
+    let scoreElement = document.getElementById('final-score')
+    scoreElement.textContent = score
+
+    // Show the end screen
+    let endScreen = document.getElementById('end-screen')
+    endScreen.style.display = 'block'
+  }
+
+  function submit_score () {
+    let initials = document.querySelector('#initials').value
+    let newScore = {
+      initials: initials,
+      score: score
+    }
+    //Save in local storage of highscores.html page
+
+    let highScores = JSON.parse(localStorage.getItem('highscoresstorage')) || []
+    highScores.push(newScore)
+    localStorage.setItem('highscoresstorage', JSON.stringify(highScores))
+    window.location.href = './assets/html/highscores.html'
+  }
+})

assets/js/questions.js

@@ -0,0 +1,52 @@
+const quizQuestions = [
+    {
+        question: "What does HTML stand for?",
+        choices: [ "Hyper Text Markup Language", "Highly Typed Machine Learning", "Hyperlink and Text Markup Language", "Home Tool Markup Language" ],
+        correctAnswer: "Hyper Text Markup Language"
+    },
+    {
+        question: "Which programming language is known as the 'language of the web'?",
+        choices: [ "Java", "Python", "JavaScript", "C++" ],
+        correctAnswer: "JavaScript"
+    },
+    {
+        question: "What is the purpose of CSS?",
+        choices: [ "To create dynamic web pages", "To style and layout web pages", "To perform server-side scripting", "To store and organize data in databases" ],
+        correctAnswer: "To style and layout web pages"
+    },
+    {
+        question: "What is the result of the expression '5 + 3' in JavaScript?",
+        choices: [ "8", "15", "53", "Error" ],
+        correctAnswer: "8"
+    },
+    {
+        question: "Which symbol is used for single-line comments in JavaScript?",
+        choices: [ "//", "/*", "#", "--" ],
+        correctAnswer: "//"
+    },
+    {
+        question: "What is the default behavior of the 'a' tag in HTML if no 'href' attribute is provided?",
+        choices: [ "It will link to the current page", "It will link to the homepage of the website", "It will not be a clickable link", "It will cause an error" ],
+        correctAnswer: "It will not be a clickable link"
+    },
+    {
+        question: "Which keyword is used to declare a variable in JavaScript?",
+        choices: [ "var", "let", "const", "variable" ],
+        correctAnswer: "var"
+    },
+    {
+        question: "What is the purpose of the 'head' element in HTML?",
+        choices: [ "To define the main content of the document", "To contain metadata about the document", "To create a header section", "To define a hyperlink" ],
+        correctAnswer: "To contain metadata about the document"
+    },
+    {
+        question: "What does CSS stand for?",
+        choices: [ "Counter Style Sheets", "Computer Style Sheets", "Cascading Style Sheets", "Colorful Style Sheets" ],
+        correctAnswer: "Cascading Style Sheets"
+    },
+    {
+        question: "What is the purpose of the 'console.log()' function in JavaScript?",
+        choices: [ "To log messages to the console for debugging", "To display a message on the webpage", "To create a popup window", "To define a new function" ],
+        correctAnswer: "To log messages to the console for debugging"
+    }
+]