In our case, the alternatives English words are stored in a question Object under an Array property called alternatives. Inside the showQuestion function, add logic to select and modify these DOM elements. The web page now shows our question followed by our list of alternatives. In this lesson we introduce the concept of handling user input. We will do this by adding an event listener to the alternatives List Items so we can check if the user picks the correct answer.
When the user clicks the button, we log the message Clicked! Starting with the code from the last lesson, add the following code below the showQuestion question function call. Note : you can optionally remove the code we just wrote as an example before continuing with the next section. As we did in the above Button example, we could assign each element an id , then select and add the event listeners one by one. Recall that the function passed to the alts. We can use the element parameter each alternative as our Event Target to attach the event handler to on each iteration of forEach.
If this comparison is true then we log Correct Answer! The only one that returns true is in fact the correct answer! In this lesson, we are gonna get started with creating our project. We know that questions have a title, which is the word in Spanish. The title will be Gato, which means cat. We know that the correct solution here is cat, which is in position. If we start here, this is position zero, this is position one. And so we want to store the correct answer here, just so that we can check later on.
Optionally, you can store the actual word as the correct answer. And I do have to say that for everything that I do here, there are many other alternative solutions. So feel free to explore other architectures, if you want to get a bit deeper into the language. Normally, you always add your script inclusion at the bottom of your document right before the closing of the body tag. So I should be seeing in the browser, that word up here. We wanna duplicate this line many times.
And that will show what this is looking like. What we want to do now is of course, replace this data by our own data. The first step here will be to select the DOM element that we want to modify. Going to zoom out a little bit, there we go.
Title div dot text content, will be equal to question dot title. And that should be enough to show that title there, great. Start by typing function. The name here will be show question. And the parameter will be that question that we need to pass in. And make sure to add some indentation just for readability. And then we if we want to call this function, we can just do show function, and we can pass in our question.
So if I run this code, it should be the exact same result. But since they all behave in the same way there is a different way of doing this, which is to select it all by the class, in this case alternative, and then work on an iteration and change all of them. And for that, we are going to be using document dot query selector all.
This will go and select all of the elements that satisfy a certain CSS query. In this case, it will be dot alternative. That is the same query that you would use in CSS. We definitely want to put this in a variable. And you can see here that we have four Li nodes selected. So four list items. For each takes a function as a parameter.
And we can pass in different parameters here, one of them is the element itself and the other one is the index the position of the element. And in the function body, if we call this element variable here, this will give us access to each one of these as the iteration progresses.
So we can go and change their values. And now what position is this going to be? Well, the good thing here is that we have that index parameter. So that will start from zero and increase in each iteration. So if we do that, we can actually get all of these one at a time. And there we go. Well, that is all for this lesson. And we created a method that receives a question as a parameter.
For the alternatives, we selected them all using query selector all and then we iterate through each one of them and change their corresponding values. Thank you for watching, I will see you in the next lesson. We are going to be taking that approach going forward, so that we can build up our app. It will be a button. And it will just say Click Me. For easy and quick vertical and horizontal alignment, use CSS Flexbox and change the display of the body to flex and specify central vertical and horizontal alignment.
The container which will contain the question, score, options and buttons need to be made now. To give a 3D effect, use the CSS box-shadow property. Specify the height and width relative to the viewport in vh and vw units respectively. We also want to make sure that the elements inside this container are perfectly aligned to centre both horizontally and vertically.
For this, we once again put CSS Flexbox to use, here we have used an additional property of flex-direction to specify how our elements will be stacked. Rounder corners are preferred more than sharp edges, and hence, a nice border-radius is also given to our container. The stylising of the score counter will be fairly simple, the font size, weight and font colour have to be controlled. I have used colours in contrast with the background to give a nice blend of all the elements and have also used different colours for the total score and the score of the user.
You are free to experiment with colours and different styles on your own. The div container with the class content will contain the text of the question and the options for that particular question. The CSS for the same will contain properties that make certain the elements inside the content container will be centrally aligned both vertically and horizontally.
Now we will stylise the buttons on our page. Since these buttons are our primary call to action, we need to make sure that the readability is maximum. On a dark background, light text color is used which is the same as that of the background. Whenever we are choosing the color scheme for our web page, we need to make sure that all the colors are in contrast with one another so that everything looks connected as a part of one element.
Some box-shadow is also added to give a nice effect. I have changed the cursor type to pointer here to differentiate the clickable and non-clickable elements on my page. For more effect, I have also added a hover functionality which will make the button in focus stand out from the rest of the buttons.
Next, we would be defining our own variables which will be used to maintain three important things for the interactivity on our webpage:. Add onclick events to the button. This will call respective functions when a particular button is clicked. Create a function beginQuiz that will get executed when the page loads and the script gets executed.
We have also added a feature that will allow the page to jump to the next question once an option is selected from the list of answer options. Create a function restart that will reset the score, the current question index and remove the hide class from elements if they are added to them and call beginQuiz. Create a function next that will jump to the next question.
Here the currentQuestion will be incremented and the hidden class will be removed from the prev button. Based on the option the user selects, the score will be incremented. Create a function prev that will jump to the previous question. Here the currentQuestion will be decremented and the hidden class will be removed from the next button. Finally, create the submit button which will hide all elements except the restart button and score. It will also add a congratulatory message to our page.