From afce6b1ca2fd6c72097dab568b5d5de64c02615c Mon Sep 17 00:00:00 2001 From: Liv Green Date: Tue, 30 Jul 2019 10:18:45 +0300 Subject: [PATCH 1/2] removed game1.js file --- game1.js | 194 ------------------------------------------------------- 1 file changed, 194 deletions(-) delete mode 100644 game1.js diff --git a/game1.js b/game1.js deleted file mode 100644 index 4f3c350..0000000 --- a/game1.js +++ /dev/null @@ -1,194 +0,0 @@ -// dom references - -const loader = document.getElementById("loader"); -const game = document.getElementById("game"); -const question = document.getElementById("question"); -const choices = Array.from(document.getElementsByClassName("choice-text")); -const questionCounterText = document.getElementById("questionCounter"); -const scoreText = document.getElementById("score"); -const episodeNameText = document.getElementById("episodeName"); -const contentNameText = document.getElementById("contentName"); -const urlNameText = document.getElementById("episodeurl"); -const id = window.location.search.split("=")[1]; -const segmentBox = document.getElementById("segment-index"); -const segmentButtons = document.getElementById("segment-buttons"); -const answerForm = document.getElementById("answer-form"); -const choiceBox = document.getElementById("choice-box"); -const saveAnswerBtn = document.getElementById("saveAnswerButton"); -const answer = document.getElementById("answer"); -// state -let currentQuestion = {}; -let acceptingAnswers = false; -let score = 0; -let questionCounter = 0; -let availableQuestions = []; -let questions = []; -let cont = false; -let maxQuestions = 20; -let isSegmentGame = false; - -// state -const CORRECT_BONUS = 10; - -const startGame = () => { - questionCounter = 0; - score = 0; - scoreText.innerText = score; - loader.classList.add("hidden"); - if (id === "0") { - game.classList.remove("hidden"); - availableQuestions = [...questions]; - maxQuestions = 50; - getNewQuestion(); - } else { - segmentBox.classList.remove("hidden"); - segmentSelector(); - } -}; - -const segmentSelector = () => { - const segmentList = [ - ...new Set(questions.map(question => question.contentSegment)) - ]; - segmentList.forEach(segment => - createButtonInsideListItem(segmentButtons, segment) - ); - createButtonInsideListItem(segmentButtons, "Play All!"); -}; - -const createButtonInsideListItem = (list, text) => { - const li = document.createElement("li"); - list.appendChild(li); - const button = document.createElement("button"); - li.appendChild(button); - button.innerText = text; - 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) { - availableQuestions.length = maxQuestions; - } - getNewQuestion(); - game.classList.remove("hidden"); - segmentBox.classList.add("hidden"); -}; - -const getNewQuestion = () => { - cont = false; - if (availableQuestions.length === 0 || questionCounter > maxQuestions - 1) { - localStorage.setItem("mostRecentScore", score); - if (isSegmentGame === false) { - return window.location.assign("end.html?contentId=" + id + "&all=1"); - } else { - return window.location.assign("end.html?contentId=" + id); - } - } - - 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") { - answerForm.classList.remove("hidden"); - choiceBox.classList.add("hidden"); - answer.addEventListener( - "keyup", - () => (saveAnswerBtn.disabled = !answer.value) - ); - document.getElementById("saveAnswerButton").addEventListener("click", e => { - e.preventDefault(); - console.log( - answer.value === currentQuestion["choice" + currentQuestion.answer] - ); - getNewQuestion(); - }); - } else { - choices.forEach(choice => { - const number = choice.dataset["number"]; - choice.innerText = currentQuestion["choice" + number]; - }); - } - availableQuestions.splice(questionIndex, 1); - acceptingAnswers = true; -}; - -const wrongAnswer = () => { - setTimeout(() => { - choices.forEach(choice => { - if (choice.dataset["number"] === currentQuestion.answer) { - choice.parentElement.classList.add("correct"); - } - }); - cont = true; - }, 200); -}; - -const continueGame = () => { - if (cont) { - choices.forEach(choice => { - choice.parentElement.classList.remove(["incorrect"]); - choice.parentElement.classList.remove(["correct"]); - }); - getNewQuestion(); - } else return; -}; - -document.body.addEventListener("click", e => continueGame()); - -choices.forEach(choice => { - choice.addEventListener("click", e => { - if (!acceptingAnswers | cont) 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); - - if (classToApply === "correct") { - setTimeout(() => { - selectedChoice.parentElement.classList.remove(classToApply); - getNewQuestion(); - }, 500); - } else { - acceptingAnswers = false; - wrongAnswer(); - } - }); -}); - -const incrementScore = num => { - score += num; - scoreText.innerText = score; -}; - -d3.csv( - "https://docs.google.com/spreadsheets/d/e/2PACX-1vSfBk-rwrIauBPn7iuoLXBxP2sSYOXRYCbJ2GflzSK6wxGVGDr_fAqORJ0JWPdajFLxnGegmrlI26HB/pub?output=csv" -).then(data => { - questions = data.filter(question => { - if (id === "0") return true; - else return question.contentId === id; - }); - startGame(); -}); - -//compare with game.js From 15428714fbeceac41b71fe7b50c8645a6994feb6 Mon Sep 17 00:00:00 2001 From: Liv Green Date: Fri, 2 Aug 2019 14:03:31 +0300 Subject: [PATCH 2/2] added analytics and fixed bug --- about.html | 14 ++ end.html | 14 ++ game.html | 9 + game.js | 438 ++++++++++++++++++++++---------------------- highscores.html | 14 ++ index.html | 14 ++ user-questions.html | 14 ++ 7 files changed, 298 insertions(+), 219 deletions(-) diff --git a/about.html b/about.html index 7be35e4..06825c7 100644 --- a/about.html +++ b/about.html @@ -7,6 +7,20 @@ About + + +
diff --git a/end.html b/end.html index 743238e..8b82216 100644 --- a/end.html +++ b/end.html @@ -6,6 +6,20 @@ Congrats! + + +
diff --git a/game.html b/game.html index 9d185d7..16c063e 100644 --- a/game.html +++ b/game.html @@ -7,6 +7,15 @@ Lamb Quiz + + +
diff --git a/game.js b/game.js index 6405b79..da7ca2a 100644 --- a/game.js +++ b/game.js @@ -52,229 +52,229 @@ 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" && 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]; - }); - } + 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); + }); + } else { + choiceBox.classList.remove("hidden"); + choices.forEach(choice => { + const number = choice.dataset["number"]; + choice.innerText = currentQuestion["choice" + number]; + }); + openFlag = false; + } - 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", - 13: "99" + 49: "1", + 50: "2", + 51: "3", + 52: "4", + 13: "99" }; const keypress = kp => { - 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); - } + 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); @@ -282,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.html b/highscores.html index c924d68..1fe7ba9 100644 --- a/highscores.html +++ b/highscores.html @@ -7,6 +7,20 @@ Highscores + + +
diff --git a/index.html b/index.html index d0146d9..e74badd 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,20 @@ Lamb Quiz + + +
diff --git a/user-questions.html b/user-questions.html index b59d94e..1c82442 100644 --- a/user-questions.html +++ b/user-questions.html @@ -7,6 +7,20 @@ Your Question + + +