D3 Examples - quiz-ideas

xxxxxxxxxx
 
<!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>
​
  <div class="quiz-container">
​
​
<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>
​
<br/>
 <div class="col-container">
​
<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>
​
 <script>
   /*!
 * jQuery UI Touch Punch 0.2.3
 *
 * Copyright 2011–2014, Dave Furfero
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * Depends:
 *  jquery.ui.widget.js
 *  jquery.ui.mouse.js
 */
!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);
 var ul = document.querySelector('#possible-answers');
 for (var i = ul.children.length; i >= 0; i--) {
  ul.appendChild(ul.children[Math.random() * i | 0]);
 }
​
 $(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>
    