Code-Along: Quiz About Me

In this activity, start building a quiz about yourself! Other people will be able to go to your website, and test their knowledge of YOU!

Getting Started

You can start by forking this template to jump right into the activity.

Updating HTML

The starter project has some information on it... but it might not be accurate to you!

1. Open the index.html file by clicking it on the left
2. Find the <h1> part in the code
3. Change the name "Joseph" to your name (unless your name is Joseph!)
4. Find the <p> part under that
5. Change the blurb to be a unique fun fact about you

Make sure to save the project to see the changes update!

Updating CSS

The starter project has some stylistic choices that are good, but you can make them your own!

1. Open the style.css file by clicking it on the left
2. Find the background: part in the code
3. Change the color to update your site's background!
4. Similarly, change the text color right under that with the color: part
5. Feel free to change the font as well
   • NOTE: There is a list of built-in fonts if you scroll down in the style.css file :)

Updating JS

The starter project has a picture for the favorite animal, but you can change it!

1. Open the script.js file by clicking it on the left
2. Find the line that has a URL (starting with https://)
3. Open a new tab and find a new image
4. Right click the image and select the "Copy image link" option
5. Remove the old URL, and replace it by pasting your new URL with Ctrl+V

Now, the page should really be yours! It's time to start making the quiz.

Displaying a Message

The first thing to do is make the startQuiz function display a message! Under the function startQuiz() { line, above the }, add a new alert statement:

1. alert keyword
2. Parentheses ()
3. Quotation Marks "" within the ()
4. A message within the ""
5. A semi-colon ;

The code in the script.js file should look something like this!

function startQuiz() {
  alert("Welcome to my quiz!");
}

Commanding the Function: Already Done!

Code like this should already be within the index.html file:

<button onclick="startQuiz()">Take a quiz about me!</button>

This connects the startQuiz function definition in the script.js file to the button on the page. Click the button to see it working!

NOTE: From here on out, every change will be in the script.js file!

Adding a Greeting

When welcoming someone to our quiz, we should ask for their name and then greet them. We can ask for their name using prompt, store their answer in a variable, and reply.

1. Under the alert (still above }), make a new line
2. Use a prompt to ask the user for their name
   1. prompt keyword
   2. Parentheses ()
   3. Quotation Marks "" in the ()
   4. A question in the ""

Save the project and click the button to see the prompt appear! Now we just have to save the answer.

1. Put your cursor to the left of the prompt line
2. There, create a new variable named name
   1. let
   2. name
   3. =
3. Set the name variable to equal to the prompt

Now the user's name is stored in the name variable. We can use it to say hi!

1. Make a new line under the prompt (still above })
2. Add an alert that says "Hi, "
3. Between the ( and ), add + name to add the name variable value to the end of the message

Save, click, and see what happens! It should respond based on the user input, saying "Hi, Person" for Person.

The added code should look something like this:

let name = prompt("What is your name?");
alert("Hi, " + name);

Asking a Quiz Question

Okay okay okay. We have added a lot of stuff, but what does any of this have to do with a quiz about me? NOTHING!

Well, it's time to change that! Let's ask our first quiz question :)

We can use prompt to ask the question, and create a new variable named answer1 to store the user's answer.

1. let keyword
2. Variable name (answer1)
3. = Equals sign
4. prompt keyword
5. () Parentheses
6. "" Quotation Marks within the ()
7. Message within the ""
8. ; Semi-colon at the end

The added code should look something like this:

let answer1 = prompt("What is my name?");

Click the button and see what happens - it asks the question, but doesn't do anything!

Checking the Answer

Now that we have their answer, we should check to see if it's correct. If it is, they can increase their points by 1.

We can do this with an if statement!

1. if keyword
2. () Parentheses
3. Condition inside of the ( and )
   1. Left value answer1
   2. == Double equals
   3. Right value "Joseph" (unless your name is NOT Joseph)
4. {} Curly brackets
5. Body between { and } - display a message
   1. alert, parentheses, quotes, "CORRECT" message!

The added code should look something like this:

if (answer1 == "Joseph") {
  alert("CORRECT");
}

Now the quiz taker can start seeing how well they know you!

Asking Another Question

Now, a quiz with one question isn't very interesting. Luckily, we can do basically the exact same thing we just did to add one more question!

1. Create a prompt asking the question
2. Store the users answer in a new variable
3. Use an if statement to check if their answer == the correct one
4. If it's correct, say so!

The added question might look something like this:

let answer2 = prompt("Where was I born?");
if (answer2 == "Cleveland") {
  alert("CORRECT")
}

Code

By the end of the activity, your code in the script.js file should look something like this:

function startQuiz() {
  alert("Welcome!");

  let name = prompt("What is your name?");
  alert("Hi, " + name);

  let answer1 = prompt("What is my name?");

  if (answer1 == "Joseph") {
    alert("CORRECT")
  }

  let answer2 = prompt("Where was I born?");
  if (answer2 == "Cleveland") {
    alert("CORRECT")
  }
}

Next Steps

Try adding more questions in the same way! You can also use an else to display an "INCORRECT" message if the quiz taker gets a question wrong :)

Template Project

Click here to make a fancy quiz.