From ae4c09a1d34a40c03aa058b5a370937fcbf436a0 Mon Sep 17 00:00:00 2001 From: krishna16sharma <59202185+krishna16sharma@users.noreply.github.com> Date: Tue, 14 Apr 2020 12:02:20 +0530 Subject: [PATCH] Fixed minor issues. Updated line 21 of end.js to store actual score instead of a random score. Updated game.js to show the corresponding string of various HTML entities (like ") in the loaded question and choice. --- Final/app.css | 127 ++++++++++++++++++++++++++++++++++++++++ Final/end.html | 37 ++++++++++++ Final/end.js | 30 ++++++++++ Final/game.css | 82 ++++++++++++++++++++++++++ Final/game.html | 54 +++++++++++++++++ Final/game.js | 132 ++++++++++++++++++++++++++++++++++++++++++ Final/highscores.css | 14 +++++ Final/highscores.html | 21 +++++++ Final/highscores.js | 8 +++ Final/index.html | 19 ++++++ Final/questions.json | 26 +++++++++ 11 files changed, 550 insertions(+) create mode 100644 Final/app.css create mode 100644 Final/end.html create mode 100644 Final/end.js create mode 100644 Final/game.css create mode 100644 Final/game.html create mode 100644 Final/game.js create mode 100644 Final/highscores.css create mode 100644 Final/highscores.html create mode 100644 Final/highscores.js create mode 100644 Final/index.html create mode 100644 Final/questions.json diff --git a/Final/app.css b/Final/app.css new file mode 100644 index 0000000..7d3c2a0 --- /dev/null +++ b/Final/app.css @@ -0,0 +1,127 @@ +:root { + background-color: #ecf5ff; + font-size: 62.5%; +} + +* { + box-sizing: border-box; + font-family: Arial, Helvetica, sans-serif; + margin: 0; + padding: 0; + color: #333; +} + +h1, +h2, +h3, +h4 { + margin-bottom: 1rem; +} + +h1 { + font-size: 5.4rem; + color: #56a5eb; + margin-bottom: 5rem; +} + +h1 > span { + font-size: 2.4rem; + font-weight: 500; +} + +h2 { + font-size: 4.2rem; + margin-bottom: 4rem; + font-weight: 700; +} + +h3 { + font-size: 2.8rem; + font-weight: 500; +} + +/* UTILITIES */ + +.container { + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + max-width: 80rem; + margin: 0 auto; + padding: 2rem; +} + +.container > * { + width: 100%; +} + +.flex-column { + display: flex; + flex-direction: column; +} + +.flex-center { + justify-content: center; + align-items: center; +} + +.justify-center { + justify-content: center; +} + +.text-center { + text-align: center; +} + +.hidden { + display: none; +} + +/* BUTTONS */ +.btn { + font-size: 1.8rem; + padding: 1rem 0; + width: 20rem; + text-align: center; + border: 0.1rem solid #56a5eb; + margin-bottom: 1rem; + text-decoration: none; + color: #56a5eb; + background-color: white; +} + +.btn:hover { + cursor: pointer; + box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5); + transform: translateY(-0.1rem); + transition: transform 150ms; +} + +.btn[disabled]:hover { + cursor: not-allowed; + box-shadow: none; + transform: none; +} + +/* FORMS */ +form { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +input { + margin-bottom: 1rem; + width: 20rem; + padding: 1.5rem; + font-size: 1.8rem; + border: none; + box-shadow: 0 0.1rem 1.4rem 0 rgba(86, 185, 235, 0.5); +} + +input::placeholder { + color: #aaa; +} diff --git a/Final/end.html b/Final/end.html new file mode 100644 index 0000000..1ec5659 --- /dev/null +++ b/Final/end.html @@ -0,0 +1,37 @@ + + + + + + + Congrats! + + + +
+
+

+
+ + +
+ Play Again + Go Home +
+
+ + + diff --git a/Final/end.js b/Final/end.js new file mode 100644 index 0000000..284babd --- /dev/null +++ b/Final/end.js @@ -0,0 +1,30 @@ +const username = document.getElementById("username"); +const saveScoreBtn = document.getElementById("saveScoreBtn"); +const finalScore = document.getElementById("finalScore"); +const mostRecentScore = localStorage.getItem("mostRecentScore"); + +const highScores = JSON.parse(localStorage.getItem("highScores")) || []; + +const MAX_HIGH_SCORES = 5; + +finalScore.innerText = mostRecentScore; + +username.addEventListener("keyup", () => { + saveScoreBtn.disabled = !username.value; +}); + +saveHighScore = e => { + console.log("clicked the save button!"); + e.preventDefault(); + + const score = { + score: mostRecentScore, + name: username.value + }; + highScores.push(score); + highScores.sort((a, b) => b.score - a.score); + highScores.splice(5); + + localStorage.setItem("highScores", JSON.stringify(highScores)); + window.location.assign("/"); +}; diff --git a/Final/game.css b/Final/game.css new file mode 100644 index 0000000..9a80ecc --- /dev/null +++ b/Final/game.css @@ -0,0 +1,82 @@ +.choice-container { + display: flex; + margin-bottom: 0.5rem; + width: 100%; + font-size: 1.8rem; + border: 0.1rem solid rgb(86, 165, 235, 0.25); + background-color: white; +} + +.choice-container:hover { + cursor: pointer; + box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5); + transform: translateY(-0.1rem); + transition: transform 150ms; +} + +.choice-prefix { + padding: 1.5rem 2.5rem; + background-color: #56a5eb; + color: white; +} + +.choice-text { + padding: 1.5rem; + width: 100%; +} + +.correct { + background-color: #28a745; +} + +.incorrect { + background-color: #dc3545; +} + +/* HUD */ + +#hud { + display: flex; + justify-content: space-between; +} + +.hud-prefix { + text-align: center; + font-size: 2rem; +} + +.hud-main-text { + text-align: center; +} + +#progressBar { + width: 20rem; + height: 4rem; + border: 0.3rem solid #56a5eb; + margin-top: 1.5rem; +} + +#progressBarFull { + height: 3.4rem; + background-color: #56a5eb; + width: 0%; +} + +/* LOADER */ +#loader { + border: 1.6rem solid white; + border-radius: 50%; + border-top: 1.6rem solid #56a5eb; + width: 12rem; + height: 12rem; + animation: spin 2s linear infinite; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/Final/game.html b/Final/game.html new file mode 100644 index 0000000..039e272 --- /dev/null +++ b/Final/game.html @@ -0,0 +1,54 @@ + + + + + + + Quick Quiz - Play + + + + +
+
+ +
+ + + diff --git a/Final/game.js b/Final/game.js new file mode 100644 index 0000000..20afdd7 --- /dev/null +++ b/Final/game.js @@ -0,0 +1,132 @@ +const question = document.getElementById("question"); +const choices = Array.from(document.getElementsByClassName("choice-text")); +const progressText = document.getElementById("progressText"); +const scoreText = document.getElementById("score"); +const progressBarFull = document.getElementById("progressBarFull"); +const loader = document.getElementById("loader"); +const game = document.getElementById("game"); +let currentQuestion = {}; +let acceptingAnswers = false; +let score = 0; +let questionCounter = 0; +let availableQuesions = []; + +let questions = []; + +//Replace HTML Entities with appropriate string +function unescapeHtml(safe) { + return safe.replace(/&/g, '&') + .replace(/</g, '<') + .replace(/>/g, '>') + .replace(/"/g, '"') + .replace(/“/g, '\“') + .replace(/”/g, '\”') + .replace(/‘/g, '\'') + .replace(/’/g, '\'') + .replace(/…/g, '…') + .replace(/‎/g, '') + .replace(/ó/g, 'ó') + .replace(/É/g, 'É') + .replace(/­/g, "-") + .replace(/'/g, "'"); +} + +fetch( + "https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple" +) + .then(res => { + return res.json(); + }) + .then(loadedQuestions => { + console.log(loadedQuestions.results); + questions = loadedQuestions.results.map(loadedQuestion => { + const formattedQuestion = { + question: unescapeHtml(loadedQuestion.question) + }; + + const answerChoices = [...loadedQuestion.incorrect_answers]; + formattedQuestion.answer = Math.floor(Math.random() * 3) + 1; + answerChoices.splice( + formattedQuestion.answer - 1, + 0, + loadedQuestion.correct_answer + ); + + answerChoices.forEach((choice, index) => { + formattedQuestion["choice" + (index + 1)] = unescapeHtml(choice); + }); + + return formattedQuestion; + }); + + startGame(); + }) + .catch(err => { + console.error(err); + }); + +//CONSTANTS +const CORRECT_BONUS = 10; +const MAX_QUESTIONS = 3; + +startGame = () => { + questionCounter = 0; + score = 0; + availableQuesions = [...questions]; + getNewQuestion(); + game.classList.remove("hidden"); + loader.classList.add("hidden"); +}; + +getNewQuestion = () => { + if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) { + localStorage.setItem("mostRecentScore", score); + //go to the end page + return window.location.assign("/end.html"); + } + questionCounter++; + progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`; + //Update the progress bar + progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`; + + const questionIndex = Math.floor(Math.random() * availableQuesions.length); + currentQuestion = availableQuesions[questionIndex]; + question.innerText = currentQuestion.question; + + choices.forEach(choice => { + const number = choice.dataset["number"]; + choice.innerText = currentQuestion["choice" + number]; + }); + + availableQuesions.splice(questionIndex, 1); + acceptingAnswers = true; +}; + +choices.forEach(choice => { + choice.addEventListener("click", e => { + if (!acceptingAnswers) return; + + acceptingAnswers = false; + const selectedChoice = e.target; + const selectedAnswer = selectedChoice.dataset["number"]; + + const classToApply = + selectedAnswer == currentQuestion.answer ? "correct" : "incorrect"; + + if (classToApply === "correct") { + incrementScore(CORRECT_BONUS); + } + + selectedChoice.parentElement.classList.add(classToApply); + + setTimeout(() => { + selectedChoice.parentElement.classList.remove(classToApply); + getNewQuestion(); + }, 1000); + }); +}); + +incrementScore = num => { + score += num; + scoreText.innerText = score; +}; diff --git a/Final/highscores.css b/Final/highscores.css new file mode 100644 index 0000000..b69893d --- /dev/null +++ b/Final/highscores.css @@ -0,0 +1,14 @@ +#highScoresList { + list-style: none; + padding-left: 0; + margin-bottom: 4rem; +} + +.high-score { + font-size: 2.8rem; + margin-bottom: 0.5rem; +} + +.high-score:hover { + transform: scale(1.025); +} diff --git a/Final/highscores.html b/Final/highscores.html new file mode 100644 index 0000000..2f81ba8 --- /dev/null +++ b/Final/highscores.html @@ -0,0 +1,21 @@ + + + + + + + High Scores + + + + +
+
+

High Scores

+ + Go Home +
+
+ + + diff --git a/Final/highscores.js b/Final/highscores.js new file mode 100644 index 0000000..860feee --- /dev/null +++ b/Final/highscores.js @@ -0,0 +1,8 @@ +const highScoresList = document.getElementById("highScoresList"); +const highScores = JSON.parse(localStorage.getItem("highScores")) || []; + +highScoresList.innerHTML = highScores + .map(score => { + return `
  • ${score.name} - ${score.score}
    • `; + }) + .join(""); diff --git a/Final/index.html b/Final/index.html new file mode 100644 index 0000000..fb1c219 --- /dev/null +++ b/Final/index.html @@ -0,0 +1,19 @@ + + + + + + + Quick Quiz + + + +
    +
    +

    Quick Quiz

    + Play + High Scores +
    +
    + + diff --git a/Final/questions.json b/Final/questions.json new file mode 100644 index 0000000..6988ecd --- /dev/null +++ b/Final/questions.json @@ -0,0 +1,26 @@ +[ + { + "question": "Inside which HTML element do we put the JavaScript??", + "choice1": "