-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
786aa77
commit ac6485c
Showing
9 changed files
with
222 additions
and
54 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,10 @@ | ||
| export default class EventManager { | ||
| EventListener(element, eventType, method) { | ||
| if (element) { | ||
| element.addEventListener(eventType, method); | ||
| element.addEventListener(eventType, (event) => { | ||
| event.preventDefault(); | ||
| method(event.target.textContent); | ||
| }); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,123 @@ | ||
| export default class GameHandeler { | ||
| constructor() {} | ||
| async CreateGame(dataBase) { | ||
| const categori = ["geografi"]; | ||
| const amountsOfCategories = categori.length; | ||
| const minCeiled = Math.ceil(0); | ||
| const maxFloored = Math.floor(amountsOfCategories); | ||
| const randomQuestion = Math.floor( | ||
| Math.random() * (maxFloored - minCeiled) + minCeiled, | ||
| ); | ||
| let questionsAnswerd = 0; | ||
| let placedAnswers = [0, 1, 2, 3]; | ||
| let answer; | ||
| constructor() { | ||
| this.gameContainer = document.getElementById("container"); | ||
| this.questionsAnswerd = 0; | ||
| this.points = 0; | ||
| } | ||
|
|
||
| ShuffleArray(array) { | ||
| for (let i = array.length - 1; i > 0; i--) { | ||
| const j = Math.floor(Math.random() * (i + 1)); | ||
| const temp = array[i]; | ||
| array[i] = array[j]; | ||
| array[j] = temp; | ||
| } | ||
| } | ||
|
|
||
| async CreateGameScreen() { | ||
| let answersLeftToPlace = [0, 1, 2, 3]; | ||
| this.ShuffleArray(answersLeftToPlace); | ||
|
|
||
| const data = await dataBase.GetQuestion(categori[randomQuestion]); | ||
| console.log(data); | ||
| const json = JSON.parse(sessionStorage.getItem("question")); | ||
|
|
||
| this.questionsAnswerd = parseInt( | ||
| sessionStorage.getItem("questionsAnswerd") || 0, | ||
| ); | ||
|
|
||
| const template = document.getElementById("answer-form"); | ||
| console.log("Before rendering - questionsAnswerd:", this.questionsAnswerd); | ||
| console.log("Total questions in JSON:", json.questions.length); | ||
|
|
||
| // Clone it (this is where the magic happens!) | ||
| const questionHtml = template.content.cloneNode(true).firstElementChild; | ||
| // Get the existing template content or create new if not exists | ||
| let questionHtml = this.gameContainer.querySelector(".question-vh"); | ||
| if (!questionHtml) { | ||
| const template = document.getElementById("answer-form"); | ||
| questionHtml = template.content.cloneNode(true).firstElementChild; | ||
| this.gameContainer.appendChild(questionHtml); | ||
| } | ||
|
|
||
| // Update the content | ||
| // Update the content directly in the existing elements | ||
| const question = questionHtml.querySelector("#question"); | ||
| const answers = [ | ||
| const answersBtn = [ | ||
| questionHtml.querySelector("#btn-1"), | ||
| questionHtml.querySelector("#btn-2"), | ||
| questionHtml.querySelector("#btn-3"), | ||
| questionHtml.querySelector("#btn-4"), | ||
| ]; | ||
|
|
||
| question.textContent = json[questionsAnswerd].question; | ||
| const answer = [ | ||
| json.questions[this.questionsAnswerd].answer1, | ||
| json.questions[this.questionsAnswerd].answer2, | ||
| json.questions[this.questionsAnswerd].answer3, | ||
| json.questions[this.questionsAnswerd].answer4, | ||
| ]; | ||
|
|
||
| // Update question text | ||
| question.textContent = json.questions[this.questionsAnswerd].question; | ||
|
|
||
| // Update answer buttons | ||
| for (let i = 0; i < 4; i++) { | ||
| answer = Math.floor( | ||
| Math.random() * (placedAnswers.length - minCeiled) + minCeiled, | ||
| ); | ||
| placedAnswers.splice(answer, 1); | ||
| answers[i].textContent = json[questionsAnswerd]["answer" + (i + 1)]; | ||
| answersBtn[i].textContent = answer[answersLeftToPlace[i]]; | ||
| } | ||
|
|
||
| console.log(questionHtml, json); | ||
| // Log to verify | ||
| console.log( | ||
| "Updated question:", | ||
| json.questions[this.questionsAnswerd].question, | ||
| "questions answerd: ", this.questionsAnswerd, | ||
| ); | ||
| } | ||
|
|
||
| CreatePointsScreen() { | ||
| const gameScreenParentNode = document.getElementById("container"); | ||
| const gameScreenNode = gameScreenParentNode.querySelector(".question-vh"); | ||
| const deletedChildNode = gameScreenParentNode.removeChild(gameScreenNode); | ||
|
|
||
| return questionHtml; | ||
| const template = document.getElementById("points"); | ||
|
|
||
| // Clone it (this is where the magic happens!) | ||
| const pointsHtml = template.content.cloneNode(true).firstElementChild; | ||
|
|
||
| // Update the content | ||
| const heading = pointsHtml.querySelector("#points-header"); | ||
| const pointsSetter = pointsHtml.querySelector("#set-points"); | ||
|
|
||
| pointsSetter.textContent = sessionStorage.getItem("points"); | ||
|
|
||
| console.log(pointsHtml); | ||
|
|
||
| sessionStorage.setItem("questionsAnswerd", 0); | ||
| sessionStorage.setItem("points", 0); | ||
|
|
||
| this.gameContainer.appendChild(pointsHtml); | ||
| } | ||
|
|
||
| ButtonAnswer(answer) { | ||
| const json = JSON.parse(sessionStorage.getItem("question")); | ||
| this.questionsAnswerd = parseInt( | ||
| sessionStorage.getItem("questionsAnswerd") || 0, | ||
| ); | ||
|
|
||
| console.log("Current question index:", this.questionsAnswerd); | ||
| console.log("Total questions:", json.questions.length); | ||
| console.log("Submitted answer:", answer); | ||
| console.log("Correct answer:", json.questions[this.questionsAnswerd].answer1); | ||
|
|
||
| console.log(json, "oihqawidj", answer); | ||
|
|
||
| if (json.questions[this.questionsAnswerd].answer1 == answer) { | ||
| this.points = sessionStorage.getItem("points"); | ||
| this.points++; | ||
| sessionStorage.setItem("points", this.points); | ||
| } | ||
|
|
||
| // Increment questionsAnswerd before checking | ||
| this.questionsAnswerd++; | ||
| sessionStorage.setItem("questionsAnswerd", this.questionsAnswerd); | ||
|
|
||
| // Check if we've reached the total number of questions | ||
| if (this.questionsAnswerd < json.questions.length) { | ||
| this.CreateGameScreen(); | ||
| } else { | ||
| this.CreatePointsScreen(); | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.