A Quiz App With a Summer Theme

I started this project by creating all the html forms and buttons for the quiz. Each question would have markup similar to this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="question-1">
  <h2>Where does the phrase 'dog days of summer' come from ?</h2>
  <form>
    <input type="radio" name="q1" id="q1-a" value="dogs" /> Lazy Dogs
    <br>
    <input type="radio" name="q1" id="q1-b" value="movie" /> Reference from a movie
    <br>
    <input type="radio" name="q1" id="q1-c" value="novel" /> A term coined from a famous novel
    <br>
    <input type="radio" name="q1" id="q1-d" value="star" /> A star
    <br><br>
    <input type="submit" value="Final answer">
  </form>
</div>

The other important html markup involved elements that are initially hidden using the css property display. They’re shown depending on which answer is chosen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<aside id="wrong">
  <img src="images/Awesome-Icons_angry.png" alt="lose icon" height="300px"/>
  <button id="w-next">Next Question</button>
</aside>

<aside id="correct">
  <img src="images/Awesome-Icons_winner.png" alt="win icon" height="300px"/>
  <button id="c-next">Next Question</button>
</aside>

<ul>
  <li><img src="images/summer-16.png" alt="flip-flops" id="q1-icon"/></li>
  <li><img src="images/summer-12.png" alt="sand castle" id="q2-icon"/></li>
  <li><img src="images/summer-25.png" alt="beachball" id="q3-icon"/></li>
  <li><img src="images/summer-22.png" alt="ice cream" id="q4-icon"/></li>
  <li><img src="images/summer-21.png" alt="sailboat" id="q5-icon"/></li>
</ul>

I first used jQuery to create a submit handler for each question and show the separate styles.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$( " #question-1 form" ).submit(function( event ) {
  event.preventDefault();
  var input = $('input[name=q1]:checked', '#question-1').val();
  $("#question-1").css("display", "none");
  if (input == question1.answer) {
    $("#correct").css("display", "block");
    $("img#q1-icon").css("opacity", "1.0");
    score +=1;
    correctNext("question-2");
  } else {
    $("#wrong").css("display", "block");
    wrongNext("question-2");
  }
});

Once the app worked, I migrated the questions into Javascript objects and worked towards making the functions reusable. I created each question by calling the createQuestion function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var question1 = new createQuestion("1","Where does the phrase 'dog days of summer' come from ?",
                                    "Lazy dogs", "A reference", "A term coined from a famous novel", "A star",
"A star");

function createQuestion(id, question, a, b, c, d, answer) {
  this.id = id;
  this.question = question;
  this.a = a;
  this.b = b;
  this.c = c;
  this.d = d;
  this.answer = answer;
  return this;
}

Afterwards, I added them to an array and looped through it to create the forms. The previous css still worked and the questions are hidden until the corresponding submit handler is called.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var questionList = [question1, question2, question3, question4, question5 ];
for (var i = 0, l = questionList.length; i < l; i ++) {
  var v = questionList[i];
  var result = createQuestionform(questionList[i]);
  $('section').append(result);
}

function createQuestionform(obj) {
  var result = $("<div id='question-"+obj.id+"'>"+
                  "<h2>"+obj.question+"</h2>"+
                  "<form>"+
                  "<input type='radio' name='q"+obj.id+"' value='"+obj.a+"'/>"+obj.a+"<br>"+
                  "<input type='radio' name='q"+obj.id+"' value='"+obj.b+"'/>"+obj.b+"<br>"+
                  "<input type='radio' name='q"+obj.id+"' value='"+obj.c+"'/>"+obj.c+"<br>"+
                  "<input type='radio' name='q"+obj.id+"' value='"+obj.d+"'/>"+obj.d+"<br><br>"+
                  "<input type='submit' value='Final answer'>"+
                  "</form>"+
                  "</div>");
  return result;
}

I also used Pixlr to shrink the images from Unsplash so that they would be more web friendly.

Comments