quiz.js

/*
  Quick quiz bootstrap extension
*/


;(function($) {

// onload modal screen by Sung
var stallAttend=0;
$(window).load(function(){
    swal({
            title: "Have you looked at our stall yet?",
            type: "info",
            showCancelButton: true,
            confirmButtonText: "Yes",
            cancelButtonText: "No",
            closeOnConfirm: false,
            closeOnCancel: false
    }, 
    function(isConfirm) {
        if (isConfirm) {
            stallAttend=1;
            swal("Thanks!", "Enjoy the quiz.", "success");
        } else {
            // swal("No problem!", "Please visit our stall after having the quiz :)", "error");
            swal("No problem!", "Please visit our stall after having the quiz :)", "success");
        }
    });
});


// keep track of number of quizes added to page
var quiz_count = 0;

// add jQuery selection method to create
// quiz structure from question json file
// "filename" can be path to question json
// or javascript object
$.fn.quiz = function(filename) {
  if (typeof filename === "string") {
    $.getJSON(filename, render.bind(this));
  } else {
    render.call(this, filename);
  }
};

// create html structure for quiz
// using loaded questions json
function render(quiz_opts) {


  // list of questions to insert into quiz
  var questions = quiz_opts.questions;

  // keep track of the state of correct
  // answers to the quiz so far
  var state = {
    correct : 0,
    total : questions.length
  };

  var $quiz = $(this)
    .attr("class", "carousel slide")
    .attr("data-ride", "carousel");

  // unique ID for container to refer to in carousel
  var name = $quiz.attr("id") || "urban_quiz_" + (++quiz_count);

  $quiz.attr('id', name);

  var height = $quiz.height();


  /*
    Add carousel indicators
  */


  /*
    Slides container div
  */
  var $slides = $("<div>")
    .attr("class", "carousel-inner")
    .attr("role", "listbox")
    .appendTo($quiz);

  /*
    Create title slide
  */
  var $title_slide = $("<div>")
    .attr("class", "item active")
    .attr("height", height + "px")
    .appendTo($slides);

  $('<h1>')
    .text(quiz_opts.title)
    .attr('class', 'quiz-title')
    .appendTo($title_slide);
  $('<p>')
    .text("published on March 22, 2020")
    .attr('class', 'published-on-date')
    .appendTo($title_slide);
  $('<img>')
    .attr('src','img/SPROG_logo.png')
    .css("width","300px")
    .css("margin","0 auto")
    // .attr('class', 'quiz-title')
    .appendTo($title_slide);
  $('<p>')
    .text("Cover photo by Sprog.")
    .attr("class", "image-credit")
    .appendTo($title_slide);

  var $start_button = $("<div>")
    .attr("class", "quiz-answers")
    .css("margin-bottom","50px")
    .appendTo($title_slide);

var $dummy2 = $("<div>")
  .text("a")
  .css("color","white")
  .appendTo($title_slide)

var $indicators = $('<ol>')
    .attr('class', 'progress-circles')

var $dummy = $("<div>")
  .text("a")
  .css("color","white")

  $("<button>")
    .attr('class', 'start-quiz quiz-button btn')
    .text("Take the quiz!")
    .click(function() {
      $quiz.carousel('next');
      $indicators.addClass('show');

      $(".active .quiz-button.btn").each(function(){
        console.log(this.getBoundingClientRect())
        $(this).css("margin-left", function(){
        return ((250 - this.getBoundingClientRect().width) *0.5) + "px"
        })
      })
    })
    .appendTo($start_button);

  $indicators
    .appendTo($quiz);
  $dummy
    .appendTo($quiz)

  $.each(questions, function(question_index, question) {
    $('<li>')
      .attr('class', question_index ? "" : "dark")
      .appendTo($indicators);
  });

  /*
    Add all question slides
  */
  $.each(questions, function(question_index, question) {

    var last_question = (question_index + 1 === state.total);

    var $item = $("<div>")
      .attr("class", "item")
      .attr("height", height + "px")
      .appendTo($slides);
    var $img_div;
    if (question.image) {
      $img_div = $('<div>')
        .attr('class', 'question-image')
        .appendTo($item);
      $("<img>")
        .attr("class", "img-responsive")
        .attr("src", question.image)
        .appendTo($img_div);
      $('<p>')
        .text(question.image_credit)
        .attr("class", "image-credit")
        .appendTo($img_div);
    }
    $("<div>")
      .attr("class", "quiz-question")
      .html(question.prompt)
      .appendTo($item);

    var $answers = $("<div>")
      .attr("class", "quiz-answers")
      .appendTo($item);

    // if the question has an image
    // append a container with the image to the item


    // for each possible answer to the question
    // add a button with a click event
    $.each(question.answers, function(answer_index, answer) {

      // create an answer button div
      // and add to the answer container
      var ans_btn = $("<div>")
        .attr('class', 'quiz-button btn')
        .html(answer)
        .appendTo($answers);

      // This question is correct if it's
      // index is the correct index
      var correct = (question.correct.index === answer_index);

      // default opts for both outcomes
      var opts = {
        allowOutsideClick : true,
        allowEscapeKey : false,
        confirmButtonText: "Next Question",
        html : true,
        confirmButtonColor: "#0096D2"
      };

      // set options for correct/incorrect
      // answer dialogue
      if (correct) {
        opts = $.extend(opts, {
          title: "Nice",
          text: "Well done!" + (
            question.correct.text ?
            ("<div class=\"correct-text\">" +
              question.correct.text +
              "</div>"
            ) : ""),
          type: "success"
        });
      } else {
        opts = $.extend(opts, {
          title: "Hmm",
          text: (
            "Nope, not quite right!<br/><br/>" +
            "The correct answer was \"" +
            question.answers[question.correct.index] + ".\"" + (
            question.correct.text ?
            ("<div class=\"correct-text\">" +
              question.correct.text +
              "</div>"
            ) : "")
            ),
          type: "error"
        });
      }

      if (last_question) {
        opts.confirmButtonText = "See your results";
      }

      // bind click event to answer button,
      // using specified sweet alert options
      ans_btn.on('click', function() {

        function next() {
          $('html,body').delay( 500 ).animate({ scrollTop: 0 }, 'slow');
          // if correct answer is selected,
          // keep track in total
          if (correct) state.correct++;
          $quiz.carousel('next');

          // if we've reached the final question
          // set the results text
          if (last_question) {
            $results_title.html(resultsText(state));
            $results_ratio.text(
              "You got " +
              Math.round(100*(state.correct/state.total)) +
              "% of the questions correct!"
            );
            $twitter_link.attr('href', tweet(state, quiz_opts));
            $facebook_link.attr('href', facebook(state, quiz_opts));
            $indicators.removeClass('show');
            // indicate the question number
            $indicators.find('li')
              .removeClass('dark')
              .eq(0)
              .addClass('dark');

            // below to store the final score to google firestore
            var newScore={
                target: quiz_opts.title, 
                timestamp: firebase.firestore.FieldValue.serverTimestamp(),
                attend: stallAttend,
                score: state.correct
            };
            // below from Sung via google firestore
            var db = firebase.firestore();
            var newScoreRef = db.collection("quiz_score").doc();
            newScoreRef.set(newScore);

          } else {
            // indicate the question number
            $indicators.find('li')
              .removeClass('dark')
              .eq(question_index+1)
              .addClass('dark');
          }
          // unbind event handler
          $('.sweet-overlay').off('click', next);
        } // end of next()

        // advance to next question on OK click or
        // click of overlay
        swal(opts, next);
        $('.sweet-overlay').on('click', next);

      }); // event of clicking answer

    }); // end of each answers

  }); // end of each questions


  // final results slide
  var $results_slide = $("<div>")
    .attr("class", "item")
    .attr("height", height + "px")
    .appendTo($slides);

  var $results_title = $('<h1>')
    .attr('class', 'quiz-title')
    .appendTo($results_slide);

  var $results_ratio = $('<div>')
    .attr('class', 'results-ratio')
    .appendTo($results_slide);

  var $restart_button = $("<div>")
    .attr("class", "quiz-answers")
    .appendTo($results_slide);

  var $links = $("<div>")
    .attr('class', 'results-social')
    .html('<div id = "links-text">To find out more, read <a href="https://www.tommys.org/pregnancy-information/im-pregnant/early-pregnancy/10-pregnancy-myths"><em>this article</em></a> for a pregancy, <a href="https://www.nhs.uk/conditions/pregnancy-and-baby/ultrasound-anomaly-baby-scans-pregnant/"><em>this NHS website</em></a> for an untrasound scan, and <a href="https://www.bbc.co.uk/bitesize/guides/z9fgr82/revision/5"><em>this BBC site</em></a> for fetal reproduction and birth.</div>')
    .appendTo($results_slide);

  var $social = $("<div>")
    .attr('class', 'results-social')
    .html('<div id = "social-text">Did you like the quiz? Share your results with your friends, so they can give it a shot!</div>')
    .appendTo($results_slide);

  var $twitter_link = $('<a>')
    .html('<span class="social social-twitter follow-tw"></span>')
    .appendTo($social);

  var $facebook_link = $('<a>')
    .html('<span class="social social-facebook follow-fb"></span>')
    .appendTo($social);

  $social.css("margin-bottom","100px")

var $dummy3 = $("<div>")
  .text("a")
  .css("color","white")
  .appendTo($results_slide)

  $("<button>")
    .attr('class', 'quiz-button btn')
    .text("Try again?")
    .click(function() {
      state.correct = 0;
      $quiz.carousel(0);
    })
    .appendTo($restart_button);

  $quiz.carousel({
    "interval" : false
  });

  $(window).on('resize', function() {
    $quiz.find(".item")
      .attr('height', $quiz.height() + "px");
  });

} // end of render()

function resultsText(state) {

  var ratio = state.correct / state.total;
  var text;

  switch (true) {
    case (ratio === 1):
      text = "Wow&mdash;perfect score!";
      break;
    case (ratio >= 0.9):
      text = "Awesome job, you got most of them right.";
      break;
    case (ratio >= 0.60):
      text = "Pretty good; we'll say that's a pass.";
      break;
    case (ratio >= 0.5):
      text = "Well, at least you got half of them right&hellip;";
      break;
    case (ratio < 0.5 && ratio !== 0):
      text = "Looks like this was a tough one; better luck next time.";
      break;
    case (ratio === 0):
      text = "Yikes, none correct. Well, maybe it was rigged?";
      break;
  }
  return text;

}


function tweet(state, opts) {

  var body = (
    "I got " + state.correct +
    " out of " + state.total +
    " on @sunggong & @ObsGynaeCam’s \"" + opts.title +
    "\" quiz. Test your knowledge here: " + opts.url
  );

  return (
    "http://twitter.com/intent/tweet?text=" +
    encodeURIComponent(body)
  );

}

function facebook(state, opts) {
  return "https://www.facebook.com/sharer/sharer.php?u=" + opts.url;
}


})(jQuery);