In this lesson, we are going to be constructing some dummy JSON data that then we're going to use that
constructed data, so randomized data into a Web application.
In this case, we're going to be building out another quiz.
And this is going to be a really a simple model.
We're not focusing on any of the styling in this lesson as it's all about constructing the JSON object.
So we've got the object being constructed here as a JavaScript object and you can output it as JSON
data onto the page.
And that will also give you the opportunity to make sure it's valid JSON data.
And when you do that, use it within the lintott is a whole lot easier to read through the data contents,
and that's why you can read it within the console.
So you can see our basic construction of the JSON object is going to be with a question and then we've
got an option for random number of options here.
So these are all generated Baza generated data.
And I'm also going to be going through how we can output that content on the page so we can do a document,
write of the content.
And this is going to output the newly constructed JSON object.
So this is all random and that's what we're doing in this lesson as we really want to focus on being
able to construct valid JSON objects that we can use within Web applications.
So let's get started coding and build this application, open up the editor, create your basic HTML
shell and then open it up within the browser.
So just as I have it here on the left hand side, I've got my code editor and then on the right hand
side I've got the code opened up within the browser window and the dev tools opened at the bottom as
we're going to be demonstrating how to generate some JSON data.
And that's going to be Dommy data that we're going to use in order to simulate a quiz like type format.
So good practice to get more familiar with Jason and then connect it, create a new JavaScript file.
And this is the fourth project within the section.
So go ahead and create four and then open up the JavaScript file and we can start getting coding with
the JavaScript code.
So we want to select some of the elements on the page.
We want to select the output area and then also make the button clickable.
So let's go ahead and do that for a select output area using the document and query selector and select
the element with a class of output.
So this will populate the output variable with that, assigning it to that element on the page.
And then also we did have a button.
So making that button clickable, we need to select the element first.
So using query selector, let's select the element and with the class of BTM and select both of those
and just double check that we do have them properly selected and you can do that within the console.
So when you make the variable, when you type in the variable, if you hover over it within the console,
it's also going to hover over that element on the page.
And also, let's try the button one just to make sure that we do have the button selected properly.
So we want to do is once the button gets clicked, one and add an event listener to the button that's
going to.
Start our default quiz so we can add about listner in there and what this is going to do when we click
the button.
It's going to start the game and we need to still, of course, generate the dummy JSON data.
So let's create all of our main functions that we're going to need.
So it's going to start the game.
And this is just going to be a simulation of the quiz content.
So type in here that it was clicked and we cannot put a message into the console.
So that means our button is ready to go.
So we also want to generate some data.
So let's create a holder.
So temporary data and this is going to be the core focus of this lesson is the temporary data that we're
generating.
So we want to whenever the page loads and we can kick this off by window out of that listener and listen
for it on content loaded.
And once the content gets loaded, then we can iron it and we'll create a function in order to handle
that as well.
So I init function and this is the function that's going to run, that's going to load the JSON or create
the JSON data.
So once the page loads and we'll also put into the console just a variable that just a value of ready.
So we know that this function is kicking off whenever the web page loads.
So let's make some updates and we're going to generate the quiz content and create that using.
JavaScript.
So generate quiz data and we'll create a function that's going to handle that and can do that function
just below here, so generate the quiz data function, we're not passing any parameters and it's going
to just simply populate the temp data with them, JSON data and then that JSON data, then we can output
it onto the page and make use of it.
So also, let's do a document.
Right, and the content that we're going to write.
Is going to be the Jason Stringer fied version of the temp data so we can see the temp data as we're
constructing it on the page.
And right now there's nothing within the temp data.
So let's generate some content and we want to create a kind of a quiz like structure.
So depending on how many questions we want to have, let's create a for loop and the questions that
we have.
So starting with an index value of zero and then loop through while questions is less than five.
So that will generate five questions and you can update these variables as we continue to generate them.
So we want to.
Create a temporary holder, and this can just be a blank array so that we have some content that we
want to populate in, and this is going to hold the possible options that we have.
So how many options that we want to generate and this can actually we'll do this using a random value,
so math flaw and using math random, multiply it by three and then we're going to add two to that value.
So within the for loop.
So starting out with the ops is equal to zero, and then we're going to loop through it while Ops is
less than Rand and increase ops by one.
So these are the options that we're going to providing for our dummy data and let's create a temporary
object.
So how we want to structure the data within the questions.
So these are the options.
So we have one for the result.
And try option and then whatever you want the text for the option, and I'm actually going to use the
tactics and I know that I'm creating it as a JavaScript object, but when we do the string Afie, it's
going to transform the content into JSON data.
So you can as well in order to practice writing JSON, you can format it within a JSON format as well.
But because I am using the back text and this is a JavaScript object that we're simply depositing.
That's why I'm still using the JavaScript format and then with the dollar sign in the curly brackets,
I can take in the value of ops and I'm going to add just one to it and then comma separate out and whether
it's correct or not so similar to what we did within the earlier quiz.
And this actually should be a question.
So put an X there by mistake.
So now we're looping through and what we want to do is we want to push the options into the holder array.
So as we generate them, we push the new option of object value into the array.
So take that temporary object and push that.
And then once we're finished and looping through, this is when we can add in the temporary object into
the array.
So let's construct temporary object, and I'm doing this so that we have an opportunity to update and
add a question and then have an object with answers.
So these are the possible options for answers.
And this, again, is coming from that holder array that we're constructing and then let's take the
temp data and push the newly constructed question into it.
And that information is going to be contained within the temp object and before we conclude this function
will go to the temp object, just to see that we've got some content in there.
So it looks like we're got undefined generate and actually this should be outputting temp data.
So there's our newly constructed array.
There's our answers or possible answers.
And it's actually not putting it on the page because while it's running, so it's running those synchronously.
So let's after we've constructed the temp data, that's when we can output it to the page and string
a file.
And and actually, let's fix this, so it's not actually we're not doing a document, right equals sign
because this is expecting a method.
So quick correction there on the syntax.
So that outputs the newly created object into the Web page.
Let's go to Jason Lente and validate that we do have a valid JSON object.
And this way we can see the newly created object that we've created and you can also update and play
around with the values.
And this is just a simulation of how you can construct your JavaScript JSON object that you're going
to use within the application.
And of course, if you needed more properties here within the object, you can add those in as well.
And this can just have whatever the value of OP says or some other details and information, so when
we refresh and do need to save that and now when we take the newly constructed Jason just validated
and now we've got that additional value in that object.
So we also want to have a correct answer, try option and wrong.
So we'll put that into the object and then we're updating the answers.
And this is also where we can generate question value.
So if we are creating a quiz so this can hold the question.
So using tactics again and this can be cue with no sign and then the dollar sign to bring in whatever
question we're on.
So we're going through the Q Yes.
And add one to it.
And what is the correct answer so we can just update whatever the Rann one is or whatever we want and
we do have a value faran there.
So let's put that and see what we've got now.
So again, you can in order to read it, I know when it is in the string of IDE version is a little
bit hard to read.
So that's why the lintang and validating that it's JSON is a good way to check it out.
So now we've got the question.
We've got an array of answers.
We still need to have a correct answer.
So let's add that in.
So after we've got all of the answers array, we're going to add in the new option for the correct answer.
And we want to structure it the same way as this object.
And this is the temporary correct.
Can say, pick this one.
And this value is going to be true, and then this can be.
One hundred or whatever you want, so just so that we have this consistent structure for the object,
and then of course, we do need to add that into the Holder array and push in the correct answer so
that we always have at least one correct answer in our dummy data.
Let's again take that and put it into the lint, make sure we've got valid JSON and then just take a
closer look at what we've got.
So we'd have three incorrect answers, one correct answer.
We've got a question.
And again, we've got in this example, we've got four incorrect answers, one correct answer and so
on.
So we've effectively built an object, JSON object that we can use as a dummy data within a quiz application.
And then I'll show you how to create a quiz out of this dummy data really quickly.
But the main objective of this lesson is to focus on going through what we have available for us within
and constructing a JSON object that we can then use within a Web application.
So let's start the game.
So once we have that data loaded and before we load the data and I'm just going to sit this two disabled
equals true.
So that way the button can't be clicked and remove out the document.
Right.
Of the JSON data as we've already seen it.
So the button can't be clicked and we only want to enable it when we have actually loaded the data.
So at this point, we're going to set this to false so the user can click the button, they can start
the game and let's button and update the text content of the button start game quiz and let's select
the each one object as well.
So selecting the one element from the page.
And that way we can update each one element.
And this actually should be const.
So selecting that each one element and let's update the tax content.
And give it a name, so that way when it's ready, we can hit the start the game and that way we can
kick off and start the game.
So we do have an object that we've constructed and we can loop through each one of the questions there
that we have.
So let's set for a game object.
And this is an object that we can use, so whatever the current one is, is going to be zero.
And then also let's add in a score as well.
So whenever the user gets the correct answer, the score can increase.
So we can have the score here at the top.
So once it gets clicked, we'll update the value of it and then we'll hit the button.
So BTN one style.
And display and set that to none for the display, so once it gets clicked, it's going to hit the button
and this is one of the best ways to work through the game is kind of play through it as if you were
playing through the actual game.
So what's the next step here?
We want to display the question.
So let's create a function to display the question.
And then this is going to move to the displaying the question and we're going to remove out the question
from the temp data array.
Let's output the question content to the page.
So we're hiding the button and then we're just moving on to the next question that's in line.
So it's going to generate the question and then we'll add in the conditions afterwards to check to see
if we still have any questions left in which question we're on.
And this time we're going to be just moving through and updating the value of L.
So within the game object, whatever that current element is that we're on, that's the value.
So that's the game current and we're just going to select it from the array index.
So taking the temp data array and returning back whatever the current game value is going to be.
So this is going to represent the question that we want to use.
And let's consolo the question before we put it out onto the Web page.
So when we start the game, there's our question.
So within the question object, let's construct those elements.
So this is going to be the mean parent div and using the document and create element.
So let's create a mean parent div that's going to hold the content and then also will create one for
the question.
And this is going to be the document, create elements and this can be an H three value.
So this is going to be where we're going to place the question and within that question, update the
text content and using the question object that we just got and outputting the property value of question.
And then let's append these items to the page and then we're going to loop through an output, possible
options for the answers.
So selecting the question content and then let's take output and append the content into there.
So we're going to be appending that div into there.
And then within that div, we're going to be appending the question object and we also want to clear
out output.
So let's update the inner HTML and just clear that out so we don't have any content in there.
So there is our question being presented and now we want to loop through all of the answers.
And just as we did earlier, where we've got a number of answers, we can sort the array.
So the question and answers, this is an array, so that gives us an option to loop through the answers
object.
So we've got the array, they're listed for this one and we've got the three items there.
So we want to randomize it and let's use this sort with compare function so that randomise compare function,
where are we going to return back random values.
So it's going to be either negative or positive and then this can randomize the array sort order.
So now we're not going to always have the correct answer as the last one.
So once we've randomize the sort order Satake question answers and then going for each one, looping
through and lets out, put the questions into a new div and this is going to be where our div is going
to hold.
So div one and append to div we're going to spend the div one.
So this is going to be our main holder for the possible options and let's create one.
So these are the selectable options using document create element and we can create them as buttons.
And then to div one, append the selection option and within the selex, let's update the text content
to be whatever the element and response value is going to be.
So start the quiz and there's our options there and start the quiz.
So obviously we know which one is the correct one.
So let's add an event listener to that.
And the listener is going to be listening for a click.
And once it gets clicked, then it can run this function.
And this is the function where we're going to check to see which one is right and then also remove out
the other possible options.
So we want to loop through.
This mean d'Hiv, and let's create a function that's going to disable buttons and this is going to be
whatever element we want to disable the buttons, so elements and query selecter all and this going
to select all of the elements within that main element.
So this way, if we want to disable the buttons on all of the elements, all of the buttons within div
one, we can just do this within the one function and this just cleans up the code.
Of course, you could do the same function here where you can loop through them all and it just cleans
up the click code.
So query selector all and it's going to select all of the elements that are buttons.
And for now we'll just console log the El's object there.
So when we click one, we've got the node list of all of the buttons.
So we want to loop through this node list using for each one.
And these are going to be the buttons.
So we want to disable the buttons and we want to remove the event listener, so what we can do is instead
of removing the event listener, we can take the LS disabled and set that to true.
So once you make a selection and actually we need to select the buttons, that's why they're not disabling.
So once we make a selection, it's going to disable all of the buttons and we can then show the next
question so we can do the display and then updates whatever we've got for a button one.
So display that as block.
And then button one and update the text content.
Next question.
So we got our option to move on to the next question.
And here we can also do the check to see if the the button was correct, so within this array of answers,
we have a boolean value.
That's correct or incorrect.
So if this element that was clicked.
So we're checked to see the elements, and if it's correct, then will I put into the console for now?
Correct, and otherwise, we'll output into the console wrong
and then update those, so we test it first within the console message and I'm going to pick the correct
one.
So clear out the console.
So we've got that correct.
And this time I'll clear it out and I'll get the wrong one.
So we got it wrong.
So that's working.
And now we can take the select button, apply a style and background color and setup to green if we
got it right, and otherwise we'll set it to red if we got it wrong.
So add in that type of feedback to the user.
So it goes green if it's right, red if it's wrong, we can also update the score.
So game score is going to increase.
So game score and or just add to that.
So score increases if we get it right, and also maybe we want to have some feedback here within the
H1 or we might just want to add to the output in our HTML and just add to that.
You got it right.
So that will save us of having a separate element and let's try it one more time as some get so great,
you got it right.
And then we're ready to move on to the next question.
Of course, we haven't applied any styling to this, but it's providing us the feedback and now we can
move on to the next question.
So game current is going to increase once we've made a selection.
Once we run that, disable the buttons.
So increase it by one and then it should generate the next question within the array.
And it's already moving to the next question over here.
So it's automatically going to whenever we pick one, it should move to the next question.
So it's moving on to question three and then question four and question five.
And then at this point, it's going to fail because we don't have any condition to stop it from moving
past what available elements we have within the array.
So we need to still do some troubleshooting and debugging of the application.
And also we need to provide the user some information about what question they're on.
So instead of outputting that value here, let's when we're moving to the next question, we can update
the text there and just write.
That with the tactics and it can see of and then to find out how many items we have to data the length.
Questions.
So we're on zero because it's zero basis, we need to add one to that.
So on question one of five now, we're on two of five, now we're on three or five, four or five and
five or five.
And if we go to six, then we don't have any more questions.
When he died in a condition to catch that error in that issue, let me update the code for you to toggle
the Wardrop so that we can get all of the code on the same page.
And the next lesson will put some finishing touches on it and do some debugging and some styling to
our application.
So the main objective, again, was to go through and build working JSON data model that we can then
use within an application.
The task for this lesson are to use and create in order to simulate JSON object that could be used within
a quiz application or any application.
So the objective again is to really focus on constructing proper, valid JSON data and plan out the
property values that you're going to need it for your application and then to ensure that it is valid
JSON object, you can output it using the JSON String Afie method and output it to the page using the
document.
Right, and try it out within JSON validator and then create a simple application that's going to be
dynamically driven by the JSON data that you've just generated and you could be ready to move on to
the next lesson.
We're going to be playing some styling to this application.