diff --git a/end.js b/end.js index 031e6f0..b51457f 100644 --- a/end.js +++ b/end.js @@ -6,7 +6,7 @@ const parseUrlParameters = parameter => .reduce((acc, cur) => ({ ...acc, [cur[0]]: cur[1] }), {}); const username = document.getElementById("username"); -const finalScore = document.getElementById("finalScore"); +finalScore = document.getElementById("finalScore"); const mostRecentScore = localStorage.getItem("mostRecentScore"); const saveScoreBtn = document.getElementById("saveScoreButton"); const urlParams = parseUrlParameters(window.location.search); @@ -20,7 +20,7 @@ const saveHighscore = e => { const rankingUrl = `https://script.google.com/macros/s/AKfycbwdGGPzI9JdH_6FN-na4boXQNZmGyv6y_690ErJc0Xhzd_CQ4A_/exec?contentId=${ urlParams.contentId - }&score=${mostRecentScore}&name=${username.value}`; + }&name=${username.value}&score=${mostRecentScore}`; fetch(rankingUrl); setInterval( () => diff --git a/game.js b/game.js index f915e96..6405b79 100644 --- a/game.js +++ b/game.js @@ -39,6 +39,7 @@ const improvementThnx = document.getElementById("improvement-thnx"); let currentQuestion = {}; let acceptingAnswers = false; let continueToNext = false; +let openFlag = false; let score = 0; let questionCounter = 0; let availableQuestions = []; @@ -48,228 +49,232 @@ let isSegmentGame = false; // config const CORRECT_BONUS = 10; +const OPEN_PROBABILITY = 0.5; const startGame = () => { - if (!contributed && contentId !== "0") - window.location.assign("user-questions.html?contentId=" + contentId); - questionCounter = 0; - score = 0; - scoreText.innerText = score; - loader.classList.add("hidden"); - if (contentId === "0") { - game.classList.remove("hidden"); - availableQuestions = [...questions]; - maxQuestions = 50; - getNewQuestion(); - } else if (contributed) { - segmentBox.classList.remove("hidden"); - segmentSelector(); - } + if (!contributed && contentId !== "0") + window.location.assign("user-questions.html?contentId=" + contentId); + questionCounter = 0; + score = 0; + scoreText.innerText = score; + loader.classList.add("hidden"); + if (contentId === "0") { + game.classList.remove("hidden"); + availableQuestions = [...questions]; + maxQuestions = 50; + getNewQuestion(); + } else if (contributed) { + segmentBox.classList.remove("hidden"); + segmentSelector(); + } }; const segmentSelector = () => { - const segmentList = [ - ...new Set(questions.map(question => question.contentSegment)) - ]; - if (segmentList.length < 2) { - game.classList.remove("hidden"); - availableQuestions = [...questions]; - segmentBox.classList.add("hidden"); - getNewQuestion(); - } - createButtonInsideListItem(document.getElementById("all-btns"), "Play All!"); - segmentList.forEach(segment => - createButtonInsideListItem(segmentButtons, segment) - ); + const segmentList = [ + ...new Set(questions.map(question => question.contentSegment)) + ]; + if (segmentList.length < 2) { + game.classList.remove("hidden"); + availableQuestions = [...questions]; + segmentBox.classList.add("hidden"); + getNewQuestion(); + } + createButtonInsideListItem(document.getElementById("all-btns"), "Play All!"); + segmentList.forEach(segment => + createButtonInsideListItem(segmentButtons, segment) + ); }; const createButtonInsideListItem = (list, text) => { - const li = document.createElement("li"); - list.appendChild(li); - const button = document.createElement("button"); - li.appendChild(button); - button.innerText = text; - if (text === "Play All!") { - button.classList.add("all-btn"); - } else { - button.classList.add("segment-btn"); - } - button.addEventListener("click", startSegmentGame); + const li = document.createElement("li"); + list.appendChild(li); + const button = document.createElement("button"); + li.appendChild(button); + button.innerText = text; + if (text === "Play All!") { + button.classList.add("all-btn"); + } else { + button.classList.add("segment-btn"); + } + button.addEventListener("click", startSegmentGame); }; const startSegmentGame = e => { - if (e.target.innerText === "Play All!") { - availableQuestions = [...questions]; - } else { - availableQuestions = questions.filter( - question => question.contentSegment === e.target.innerText - ); - isSegmentGame = true; - } - if (availableQuestions.length < maxQuestions) { - maxQuestions = availableQuestions.length; - } - getNewQuestion(); - game.classList.remove("hidden"); - segmentBox.classList.add("hidden"); + if (e.target.innerText === "Play All!") { + availableQuestions = [...questions]; + } else { + availableQuestions = questions.filter( + question => question.contentSegment === e.target.innerText + ); + isSegmentGame = true; + } + if (availableQuestions.length < maxQuestions) { + maxQuestions = availableQuestions.length; + } + getNewQuestion(); + game.classList.remove("hidden"); + segmentBox.classList.add("hidden"); }; const getNewQuestion = () => { - improvementBtn.classList.remove("hidden"); - continueToNext = false; - if (availableQuestions.length === 0 || questionCounter > maxQuestions - 1) { - localStorage.setItem("mostRecentScore", score); - if (isSegmentGame === false) { - return window.location.assign( - "end.html?contentId=" + contentId + "&all=1" - ); - } else { - return window.location.assign("end.html?contentId=" + contentId); + improvementBtn.classList.remove("hidden"); + continueToNext = false; + if (availableQuestions.length === 0 || questionCounter > maxQuestions - 1) { + localStorage.setItem("mostRecentScore", score); + if (isSegmentGame === false) { + return window.location.assign( + "end.html?contentId=" + contentId + "&all=1" + ); + } else { + return window.location.assign("end.html?contentId=" + contentId); + } } - } - questionCounter++; - questionCounterText.innerText = questionCounter + "/" + maxQuestions; - const questionIndex = Math.floor(Math.random() * availableQuestions.length); - currentQuestion = availableQuestions[questionIndex]; - episodeNameText.innerText = currentQuestion.contentSegment; - contentNameText.innerText = currentQuestion.content; - question.innerText = currentQuestion.question; - urlNameText.href = currentQuestion.url; + questionCounter++; + questionCounterText.innerText = questionCounter + "/" + maxQuestions; + const questionIndex = Math.floor(Math.random() * availableQuestions.length); + currentQuestion = availableQuestions[questionIndex]; + episodeNameText.innerText = currentQuestion.contentSegment; + contentNameText.innerText = currentQuestion.content; + question.innerText = currentQuestion.question; + urlNameText.href = currentQuestion.url; - if (currentQuestion.open === "TRUE") { - openAnswerForm.classList.remove("hidden"); - choiceBox.classList.add("hidden"); - openAnswerInput.addEventListener( - "keyup", - () => (saveAnswerBtn.disabled = !openAnswerInput.value) - ); - saveAnswerBtn.addEventListener("click", e => { - if (!acceptingAnswers) return; - acceptingAnswers = false; - e.preventDefault(); - checkOpenAnswer(openAnswerInput.value); - }); - } else { - choiceBox.classList.remove("hidden"); - choices.forEach(choice => { - const number = choice.dataset["number"]; - choice.innerText = currentQuestion["choice" + number]; - }); - } + if (currentQuestion.open === "TRUE" && Math.random() > OPEN_PROBABILITY) { + openFlag = true; + openAnswerForm.classList.remove("hidden"); + choiceBox.classList.add("hidden"); + openAnswerInput.addEventListener( + "keyup", + () => (saveAnswerBtn.disabled = !openAnswerInput.value) + ); + saveAnswerBtn.addEventListener("click", e => { + e.preventDefault(); + if (!acceptingAnswers) return; + acceptingAnswers = false; + checkOpenAnswer(openAnswerInput.value); + }); + openFlag = false; + } else { + choiceBox.classList.remove("hidden"); + choices.forEach(choice => { + const number = choice.dataset["number"]; + choice.innerText = currentQuestion["choice" + number]; + }); + } - availableQuestions.splice(questionIndex, 1); - acceptingAnswers = true; + availableQuestions.splice(questionIndex, 1); + acceptingAnswers = true; }; let classToApply; checkOpenAnswer = textInput => { - if (currentQuestion.exactMatch === "TRUE") { - classToApply = - textInput === currentQuestion["choice" + currentQuestion.answer] - ? "correct" - : "incorrect"; - } else { - lowerCaseInput = textInput.toLowerCase().split(" "); - lowerCaseAnswer = currentQuestion["choice" + currentQuestion.answer] - .toLowerCase() - .split(" "); - console.log(lowerCaseInput); - classToApply = - lowerCaseInput - .map(word => lowerCaseAnswer.indexOf(word)) - .filter(b => b !== -1).length > 0 - ? "correct" - : "incorrect"; - } - if (classToApply === "correct") { - incrementScore(CORRECT_BONUS); - } - openAnswerInput.classList.add(classToApply); - acceptingAnswers = false; - if (classToApply === "correct") { - setTimeout(() => { - openAnswerInput.classList.remove(classToApply); - openAnswerInput.value = ""; - openAnswerForm.classList.add("hidden"); - getNewQuestion(); - }, 500); - } else { - wrongOpenAnswer(); - } + if (currentQuestion.exactMatch === "TRUE") { + classToApply = + textInput === currentQuestion["choice" + currentQuestion.answer] + ? "correct" + : "incorrect"; + } else { + lowerCaseInput = textInput.toLowerCase().split(" "); + lowerCaseAnswer = currentQuestion["choice" + currentQuestion.answer] + .toLowerCase() + .split(" "); + console.log(lowerCaseInput); + classToApply = + lowerCaseInput + .map(word => lowerCaseAnswer.indexOf(word)) + .filter(b => b !== -1).length > 0 + ? "correct" + : "incorrect"; + } + if (classToApply === "correct") { + incrementScore(CORRECT_BONUS); + } + openAnswerInput.classList.add(classToApply); + acceptingAnswers = false; + if (classToApply === "correct") { + setTimeout(() => { + openAnswerInput.classList.remove(classToApply); + openAnswerInput.value = ""; + openAnswerForm.classList.add("hidden"); + getNewQuestion(); + }, 500); + } else { + wrongOpenAnswer(); + } }; wrongOpenAnswer = () => { - setTimeout(() => { - redAnswer.innerText = currentQuestion["choice" + currentQuestion.answer]; - correctAnswerBox.classList.remove("hidden"); - continueToNext = true; - }, 500); + setTimeout(() => { + redAnswer.innerText = currentQuestion["choice" + currentQuestion.answer]; + correctAnswerBox.classList.remove("hidden"); + continueToNext = true; + }, 500); }; const wrongAnswer = () => { - setTimeout(() => { - choices.forEach(choice => { - if (choice.dataset["number"] === currentQuestion.answer) { - choice.parentElement.classList.add("correct"); - } - }); - continueToNext = true; - }, 200); + setTimeout(() => { + choices.forEach(choice => { + if (choice.dataset["number"] === currentQuestion.answer) { + choice.parentElement.classList.add("correct"); + } + }); + continueToNext = true; + }, 200); }; const continueGame = () => { - if (continueToNext) { - choices.forEach(choice => { - choice.parentElement.classList.remove(["incorrect"]); - choice.parentElement.classList.remove(["correct"]); - }); - correctAnswerBox.classList.add("hidden"); - openAnswerForm.classList.add("hidden"); - openAnswerInput.classList.remove("incorrect"); - openAnswerInput.value = ""; - getNewQuestion(); - } else return; + if (continueToNext) { + choices.forEach(choice => { + choice.parentElement.classList.remove(["incorrect"]); + choice.parentElement.classList.remove(["correct"]); + }); + correctAnswerBox.classList.add("hidden"); + openAnswerForm.classList.add("hidden"); + openAnswerInput.classList.remove("incorrect"); + openAnswerInput.value = ""; + getNewQuestion(); + } else return; }; checkChoice = (selectedAnswer, selectedChoice) => { - const classToApply = - selectedAnswer === currentQuestion.answer ? "correct" : "incorrect"; + const classToApply = + selectedAnswer === currentQuestion.answer ? "correct" : "incorrect"; - if (classToApply === "correct") { - incrementScore(CORRECT_BONUS); - } - selectedChoice.parentElement.classList.add(classToApply); + if (classToApply === "correct") { + incrementScore(CORRECT_BONUS); + } + selectedChoice.parentElement.classList.add(classToApply); - if (classToApply === "correct") { - setTimeout(() => { - selectedChoice.parentElement.classList.remove(classToApply); - getNewQuestion(); - }, 500); - } else { - acceptingAnswers = false; - wrongAnswer(); - } + if (classToApply === "correct") { + setTimeout(() => { + selectedChoice.parentElement.classList.remove(classToApply); + getNewQuestion(); + }, 500); + } else { + acceptingAnswers = false; + wrongAnswer(); + } }; const keyboardMap = { - 49: "1", - 50: "2", - 51: "3", - 52: "4" + 49: "1", + 50: "2", + 51: "3", + 52: "4", + 13: "99" }; const keypress = kp => { - if (currentQuestion.open === "TRUE" || !keyboardMap[kp]) return; - if (!acceptingAnswers | continueToNext) { - continueGame(); - } else { - choices.forEach(choice => { - if (choice.dataset["number"] === keyboardMap[kp]) { - selectedChoice = choice; - } - }); - checkChoice(keyboardMap[kp], selectedChoice); - } + if (openFlag || !keyboardMap[kp]) return; + if (!acceptingAnswers | continueToNext) { + continueGame(); + } else if (kp !== 13) { + choices.forEach(choice => { + if (choice.dataset["number"] === keyboardMap[kp]) { + selectedChoice = choice; + } + }); + checkChoice(keyboardMap[kp], selectedChoice); + } }; document.onkeyup = e => keypress(e.which); @@ -277,67 +282,67 @@ document.onkeyup = e => keypress(e.which); document.body.addEventListener("click", e => continueGame()); choices.forEach(choice => { - choice.addEventListener("click", e => { - if (!acceptingAnswers | continueToNext) return; - acceptingAnswers = false; - const selectedChoice = e.target; - const selectedAnswer = selectedChoice.dataset["number"]; - checkChoice(selectedAnswer, selectedChoice); - }); + choice.addEventListener("click", e => { + if (!acceptingAnswers | continueToNext) return; + acceptingAnswers = false; + const selectedChoice = e.target; + const selectedAnswer = selectedChoice.dataset["number"]; + checkChoice(selectedAnswer, selectedChoice); + }); }); const incrementScore = num => { - score += num; - scoreText.innerText = score; + score += num; + scoreText.innerText = score; }; improvementBtn.addEventListener("click", e => { - improvementForm.classList.remove("hidden"); - exitImprovement.classList.remove("hidden"); + improvementForm.classList.remove("hidden"); + exitImprovement.classList.remove("hidden"); }); exitImprovement.addEventListener("click", e => { - improvementForm.classList.add("hidden"); - exitImprovement.classList.add("hidden"); + improvementForm.classList.add("hidden"); + exitImprovement.classList.add("hidden"); }); filledForm = () => !(usernameInput.value && feedback.value && emailInput.value); usernameInput.addEventListener( - "keyup", - () => (saveImprovementBtn.disabled = filledForm()) + "keyup", + () => (saveImprovementBtn.disabled = filledForm()) ); emailInput.addEventListener( - "keyup", - () => (saveImprovementBtn.disabled = filledForm()) + "keyup", + () => (saveImprovementBtn.disabled = filledForm()) ); feedback.addEventListener( - "keyup", - () => (saveImprovementBtn.disabled = filledForm()) + "keyup", + () => (saveImprovementBtn.disabled = filledForm()) ); saveImprovement = e => { - e.preventDefault(); - const saveImprovementUrl = `https://script.google.com/macros/s/AKfycbwXBGlvexKjpcZ9ccWN3o4lrm4_DnKvTuTYfHE2o7_QmrgcveDf/exec?nickname=${ + e.preventDefault(); + const saveImprovementUrl = `https://script.google.com/macros/s/AKfycbwXBGlvexKjpcZ9ccWN3o4lrm4_DnKvTuTYfHE2o7_QmrgcveDf/exec?nickname=${ usernameInput.value }&feedback=${feedback.value}&question=${currentQuestion.question}&email=${ emailInput.value }`; - fetch(saveImprovementUrl); - improvementForm.classList.add("hidden"); - exitImprovement.classList.add("hidden"); - improvementBtn.classList.add("hidden"); - improvementThnx.classList.remove("hidden"); - setTimeout(() => { - improvementThnx.classList.add("hidden"); - }, 4000); + fetch(saveImprovementUrl); + improvementForm.classList.add("hidden"); + exitImprovement.classList.add("hidden"); + improvementBtn.classList.add("hidden"); + improvementThnx.classList.remove("hidden"); + setTimeout(() => { + improvementThnx.classList.add("hidden"); + }, 4000); }; d3.csv( - "https://docs.google.com/spreadsheets/d/e/2PACX-1vSfBk-rwrIauBPn7iuoLXBxP2sSYOXRYCbJ2GflzSK6wxGVGDr_fAqORJ0JWPdajFLxnGegmrlI26HB/pub?output=csv" + "https://docs.google.com/spreadsheets/d/e/2PACX-1vSfBk-rwrIauBPn7iuoLXBxP2sSYOXRYCbJ2GflzSK6wxGVGDr_fAqORJ0JWPdajFLxnGegmrlI26HB/pub?output=csv" ).then(data => { - questions = data.filter(question => { - if (contentId === "0") return true; - else return question.contentId === contentId; - }); - startGame(); + questions = data.filter(question => { + if (contentId === "0") return true; + else return question.contentId === contentId; + }); + startGame(); }); diff --git a/highscores.js b/highscores.js index a93473c..97c4d62 100644 --- a/highscores.js +++ b/highscores.js @@ -11,13 +11,8 @@ d3.csv( const params = parseUrlParameters(window.location.search); const id = params.contentId; let ranking = highscores.filter(x => x.contentId === id); - - let exists = ranking - .filter(x => x.name === params.name) - .map(y => y.score) - .filter(x => x === params.score).length; - if ((exists === 0) & params.name) ranking.push(params); - ranking = ranking +ranking.push(params); + ranking = [...new Set(ranking)] .sort((a, b) => parseInt(b.score) - parseInt(a.score)) .slice(0, 10); const highscoreList = document.getElementById("highscoreList");