Lesson 7

Showing a particular question

Using JavaScript to dynamically change our app

In your project, create a new file by clicking the green + button. Thimble will automatically give it the name script-1.js.

Thimble will add a bit of code to this new file, but let's delete that for now to keep things neat.

Also, we need to tell the browser to read it. Unlike CSS, we generally do this from the bottom of the HTML page; this is so browsers can read the HTML and CSS first, which means the app will load faster:

Now that our JS file is connected, let's do a little test to see if it's working. If you write the following in your script-1.js file, a pop up box should appear:

If you didn't double-check your script is connected properly, and make sure your browser is not blocking popups.

Let's delete the alert now we know it's working.

As well as including our JavaScript file, we'll also need to include a link to jQuery, which will allow us to use code developed by other developers to supercharge our web app.

To include jQuery, Google ‘jQuery CDN' and look for a line similar to the below. Head back to your index.html file, and insert the line at the bottom of your HTML file, before you link to script-1.js. This will link to a version of jQuery hosted on a Content Delivery Network.

Now we've got the jQuery library connected we can start to write the variables we need to get our quiz to work. At the top of your script-1.js file, we need to define the following variable. We'll use this line:

To keep a check on what question our user is on. We'll then create a score variable:

This can store the user's score. We now need a function to show a question. Our function will need to know what question our user is on, and then find the corresponding paragraph, and show it.

To define a function, we write the following line:

The curly brackets is where our code that finds and shows the paragraph will go. The (question) bit of the function is the argument - or an input, which will allow us to tell the function what question our user is on.

Once we've defined the function, we need to hide all of the questions and then only show the question that the user is on. To do this, we need to add two lines inside our function, so that it looks like this:

We're using the jQuery show and hide functions to hide all of the question paragraphs and then show only the question that the user is on. If we run this function, passing in our questionNumber variable, it will show the first question:

Try changing the initial value of the questionNumber variable. The function should be re-run with the new value, and show the appropriate question.

The Power of Libraries

jQuery is a JavaScript library written originally by John Resig. All a library really is a collection of pre written code that we can access.

Content Delivery Network (CDN)

A content delivery network is an idea meaning that a file or service is hosted on computers around the world, so that wherever your users are they’ll be able to access the file quickly and easily

Camel Casing

You may be wondering why we call our variables and functions names like questionNumber. It’s because when you have long function names it’s easier to read them when these first letter of each word (apart from the first) is capitalised. Look at this for an example:

thisIsALongFunctionNameThatIsCamelCased

thisisalongfunctionnamethatisnotcamelcased

Nth-of-type

The nth-of-type selector allows us to select an element and detect what order it is on the page. This means that we’re able to give our users the quiz questions one by one, rather than all at once.

Go to the next lesson

index.html

script-1.js

the web page

New Window
Next Lesson