-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Mng 11 html quiz template #19
Conversation
…dates Use templates provided in index.html to render the page. Use service question syntax for getting the question.
Still needed to correct error in template reading
// listen for an answer selection | ||
const answersOptions = [...quizBody.querySelector(".quiz-answers-list").children] | ||
for (let option of answersOptions) { | ||
option.addEventListener("mouseup", function selectEventFunc() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
mouseup? czemu nie click?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
a, dobra, bo może ktoś by się w ostatniej chwili cofnął i jednak chciał ściągnąć myszkę z odpowiedzi. Make sense 😌
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Exactly, that was the idea behind
} | ||
|
||
//TODO dummy function to be removed after generator is added | ||
const getNextQuestion = (mode) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
be aware of that this function is going to be async
src/app/quizPage.js
Outdated
questionNum: 1, | ||
} | ||
setupPageTitle(mode); | ||
CURRENT_MODE = mode; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
maybe set it at the top of the function and then only refer to CURRENT_MODE
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
right, I changed it in the last line, and forgot here
src/app/quizPage.js
Outdated
const quizBody = document.querySelector('#quiz-body'); | ||
const quizTemplate = document.getElementById('quiz-template'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Isn't querySelector('#quiz-body')
the same as getElementById('quiz-body')
? I am not sure, just asking 😄
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yup, it would be the same, i could just use querySelector everywhere
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Well, I think it is better to use getElementById - because you know that you are searching for specific id and not for any other items. Internet says "it depends", see here:
https://stackoverflow.com/questions/26848289/javascript-queryselector-vs-getelementbyid
Co-authored-by: Łukasz Dutka <lukaszdutka2@gmail.com>
Maybe we can merge it to dev? I connected it to Agata's functions and added SELECTED_MODE variable, so we can select and run the game, for now with the one dummy question. I will open new task for me to connect it after generator is ready. |
QuizPage.js need to be connected with generator, for now it uses dummy variables, and reads the same question all over again. ( I will do it when Marisz will finish the generator)
General about how it works:
StartButton is triggering the RenderQuizPage() function. This function uses template stored in index.html and render basic elements, like header title, setting up question number to 1. Next renderNextQusetion is called to generate first question according to the selected game mode.
Variables used during the game duration, like the mode or a generator, for now, are stored as module variables, this way is easily reachable when a new question is generated. Of course, we can still think about a better way of handling game status and data.
If the generator returned all questions == user answered all of then renderNextQuestion is no longer rendering the new quiz page. Later we will connect it to the results page.
Styles for questions and answers are added according to the mode, we will see during the styling if they are enough to achieve a good result.
What to be done next: