quiz-ideas

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Free Press headline quiz</title>
  <script
  src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <style>

.quiz-container {
    max-width:650px;
    margin: auto;

}

#possible-answers, #user-answers {
  width: 49.5%;
  min-height: 120px;
  list-style-type: none;
  margin: 0;
  padding: 5px 5px 25px 5px;
  float: left;
  margin-right: 1px;

}
#user-answers {
  background-color: #EEEEEE;
  border: 2px dashed grey;
  border-radius: 10px;
}

#possible-answers li, #user-answers li {
  padding: 4px;
}

.answer {
  /*border: 2px solid #DFDFDF;*/
  border-radius: 10px;
  background-color: #E3F7FF;
    border: 2px solid #DFDFDF;
  border-radius: 10px;
}

.answer:hover {
  background-color: #00577B;
  color: #eee;
  cursor: move;
}

.correct {
  background-color: #89BD9E;
  color: white;
}

.wrong {
  background-color: #C81D25;
  color: white;
}

#check-answer {
  display: none;
}
#next-puzzle {
  display: none;
}
#answer-verification {
  display: block;
}

.placeholder-prompt {
  text-align: center;
  opacity: .8;
}

.quiz-button {
  margin: auto;
}
.col-container {
  display: table;
  /* Make the container element behave like a table */
  width: 100%;
  /* Set full-width to expand the whole page */
}
.top-curved-arrow {
  max-width: 50px;
  display: block;
  opacity: .5;
  margin: auto;
}

h4 {
  text-align: center;
}

</style>
  <link href="https://www.winnipegfreepress.com/includes/v6_base.css?v=46" rel="stylesheet" type="text/css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="script/jquery.ui.touch-punch.min.js"></script>
</head>
<body>

<h4>This is a super fun game. Drag the events into the right column in the correct order. Super fun, right?? (Warning: These are test questions, real content tktk)</h4>
<br/>
    <svg class="top-curved-arrow" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 87.721 36.87375" enable-background="new 0 0 87.721 29.499" xml:space="preserve"><g><polygon points="74.425,2.003 74.425,2.003 74.425,2.003  "/><path d="M79.876,0l-5.451,2.003l4.57,12.412C58.446,2.158,41.114,0.878,28.063,3.844C14.233,6.961,5.326,14.607,1.766,18.155   C0.647,19.273,0.058,19.994,0,20.061l4.504,3.669l0,0c0,0,0.006-0.005,0.056-0.065c0.153-0.18,0.597-0.684,1.317-1.403   c3.062-3.072,11.136-9.988,23.462-12.752c11.662-2.601,27.238-1.694,46.794,9.967l-12.157,4.587l2.05,5.437l21.695-8.189L79.876,0z   "/></g><text x="0" y="44.498999999999995" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Star and Anchor Design</text><text x="0" y="49.498999999999995" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>

<ul id="possible-answers" class="connectedSortable">
  <li class="answer" id="1">
    <p>Sears announces it's closing all Canadian stores</p>
  </li>
  <li class="answer" id="2">
    <p>Dave Wheeler is fired from Bell Media</p>
  </li>
  <li class="answer" id="3">
    <p>Popeyes opens first Winnipeg location</p>
  </li>
  <li class="answer" id="4">
    <p>Humboldt crash kills hockey team</p>
  </li>
  <li class="answer" id="5">
        <p>Bowman wins re-election Oct.</p>
  </li>
</ul>

<ul id="user-answers" class="connectedSortable">
  <li class="placeholder-prompt">
    <p>Drop answers in the correct order from <strong> <br/>first <br/>↓<br/>last</strong> </p>
    </li>
</ul>
</div>

<br/>

<input type="submit" class="quiz-button" value="Did I get it right?" onclick="submit()" id="answer-verification">
<input type="submit" class="quiz-button" value="OK, show me the right order" onclick="showCorrectOrder()" id="check-answer">
<input type="submit" class="quiz-button" value="Moar to come. End of game" onclick="" id="next-puzzle">
<br/>
  <h4>Score: <span id="score">0</span>/5</h4>

</div>

$(function() {
  $("#possible-answers, #user-answers").sortable({
     cursor: "crosshair",

over: function() {
            $('.placeholder-prompt').hide();
        },
        out: function() {
            $('.placeholder-prompt').show();
        },
        stop: function() {
            $('.placeholder-prompt').remove();
        },
    connectWith: ".connectedSortable"
  }).disableSelection();
 });

var userScore = 0;

//check the order of #user-answers
 function submit() {
  var idsInOrder = $("#user-answers").sortable("toArray");
  console.log(idsInOrder)
  //first, let's check to see if user has put in five responses...the logic needs work
  if (idsInOrder.length == 5) {
      //check order by loopthiong through each
      var i;
      for (i = 0; i < idsInOrder.length; i++) { 
        if (idsInOrder[i] == (i+1)) {
          console.log(i + " is right")
          userScore = userScore + 1;
          document.getElementById(i+1).setAttribute("class", "correct answer")
        } else {
          console.log(i + " is wrong");
          document.getElementById(i+1).setAttribute("class", "wrong answer")
    }   
  }
    document.getElementById("score").innerHTML = userScore;
    userScore = 0;
    document.getElementById("answer-verification").style.display = "none";
    document.getElementById("check-answer").style.display = "block";
    $("#user-answers").sortable('disable');
  } else {
    console.log("Not finished")
  }
 }
//https://stackoverflow.com/questions/41022800/sort-list-items-based-on-array
 function showCorrectOrder() {

var sorted = [1, 2, 3, 4, 5];
  sorted.forEach(function(id) {
  $("#" + id).appendTo("#user-answers")
})
  $("li").removeClass("wrong correct")
  $("li").stop(true,true).addClass("correct answer", 500);
  document.querySelector(".top-curved-arrow").style.display = "none";
  document.getElementById("possible-answers").style.display = "none";
  document.getElementById("user-answers").style.width = '100%';
  document.getElementById("check-answer").style.display = "none";
  document.getElementById("next-puzzle").style.display = "block";
 }
  </script>
 
</body>
</html>

https://code.jquery.com/jquery-1.12.4.js

https://code.jquery.com/ui/1.12.1/jquery-ui.js