<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="author" content="Angel Nguyen">
  <meta name="description" content="An eLearning app for Hand-Eye co-ordination">
  <meta name="keywords" content="elearning, education, hand, eye, coordination, hands4eyes">
  <link rel="stylesheet" type="text/css" href="main.css">
  <link href="https://fonts.googleapis.com/css?family=Wendy+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
  <title>H4E Quiz</title>
</head>
  <body>
    <a href='index.html'><button type="button" name="home" id='btn-home'><i class='fa fa-home fa-2x'></i></button></a>
    <img src="https://orig00.deviantart.net/14fd/f/2017/268/e/8/logo_by_shadow_heartless-dbojasu.png" alt='logo' id='logo'><br>
    <h1>QUIZ</h1>

    <div id="question-one" class="quiz-ans-container">
      <h2>Q1. Which sensory did you use for the tasks?</h2>
      <div class="quiz-choice wrong-q1">
        <p>Touch</p>
      </div>
      <div class="quiz-choice wrong">
        <p>Smell</p>
      </div>
      <div class="quiz-choice correct-q1">
        <p>Sight</p>
      </div>
      <div class="quiz-choice wrong">
        <p>Sound</p>
      </div>
    </div>

    <div id="question-two" class="quiz-ans-container" style="display:none;">
      <h2>Q2. Which of these disease affect the steadiness of your hands?</h2>
      <div class="quiz-choice correct-q2">
        <p>Parkinson’s Disease</p>
      </div>
      <div class="quiz-choice wrong">
        <p>Mad Cow Disease</p>
      </div>
      <div class="quiz-choice wrong">
        <p>Chicken Pox</p>
      </div>
      <div class="quiz-choice wrong">
        <p>Cancer</p>
      </div>
    </div>

    <div id="question-three" class="quiz-ans-container" style="display:none;">
      <h2>Q3. Which of these activities requires hand eye co-ordination?</h2>
      <div class="quiz-choice wrong">
        <p>Kicking a ball</p>
      </div>
      <div class="quiz-choice correct-q3">
        <p>Threading a needle</p>
      </div>
      <div class="quiz-choice wrong">
        <p>Running</p>
      </div>
      <div class="quiz-choice wrong">
        <p>Reading a book</p>
      </div>
    </div>

    <div id="question-four" class="quiz-ans-container" style="display:none;">
      <h2>Q4. Which part of the eye allows you to focus?</h2>
      <div class="quiz-choice wrong">
        <p>Iris</p>
      </div>
      <div class="quiz-choice wrong">
      <p>Pupil</p>
      </div>
      <div class="quiz-choice wrong">
        <p>Cornea</p>
      </div>
      <div class="quiz-choice correct-q4">
        <p>Lens</p>
      </div>
    </div>

    <div id="question-five" class="quiz-ans-container" style="display:none;">
      <h2>Q5. Which nerve sends information from the eye to the brain?</h2>
      <div class="quiz-choice correct-q5">
        <p>Optic</p>
      </div>
      <div class="quiz-choice wrong">
        <p>Central</p>
      </div>
      <div class="quiz-choice wrong">
        <p>Spinal</p>
      </div>
      <div class="quiz-choice wrong">
        <p>Sensory</p>
      </div>
    </div>

    <div id="quiz-result" style="display:none;">
      <p>Result here</p>
      <div class='score-container'>
        Score: <span id="score">0</span>
      </div>
    </div>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <script src="index.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
  </body>
</html>
/* Universal Rules */
html {
  background-color: #293E4A;
  text-align: center;
	height: 100%;
}

body {
	background-color: #334D5C;
	width: 900px;
	height: 100%;
	margin: auto;
}

#logo {
  width: 200px;
  margin-top: 20px;
}

p {
  font-family: 'Varela Round', sans-serif;
  color: white;
	margin: 20px;
}

h1 {
  font-family: 'Varela Round', sans-serif;
	font-weight: bold;
	font-size: 28px;
  color: white;
	margin: 20px;
}

#btn-home {
	position: relative;
	z-index: 0;
	width: 60px;
	height: 60px;
	top: -80px;
  left: -300px;
  right: 0;
	bottom: 0;
}

button {
  font-size: 18px;
  font-family: 'Varela Round', sans-serif;
  margin: 5px;
  color: #293E4A;
  background-color: #4DB3B3;
  border: none;
  border-radius: 20px;
  padding: 10px;
  width: 200px;
}

button:hover {
  cursor: pointer;
  background-color: #E6772D;
  color: white;
}

button:active {
  width: 190px;
}

button:focus {
  outline:0;
}

/* INDEX PAGE */

/* VIDEO PAGE */

/* CHARACTER SELECTION */
#character {
  text-align: center;
	margin: auto;
	display: inline-block;
}

#eris, #parki {
  width: 380px;
  height: 380px;
  margin: 10px;
  border-radius: 20px;
  border: 3px solid white;
  background-color: #E6772D;
  float: left;
	cursor: pointer;
}

div > img {
  width: 230px;
}

/* QUIZ PAGE */
.quiz-ans-container {
	text-align: center;
	margin: 0 auto;
	display: inline-block;
}

.quiz-choice {
	width: 150px;
	height: 150px;
	margin: 10px;
	border-radius: 20px;
	border: 3px solid white;
	background-color: #E6772D;
	float: left;
	cursor: pointer;
}

h2 {
	font-family: 'Varela Round', sans-serif;
	font-weight: bold;
	font-size: 26px;
	color: white;
	margin: 20px;
}

/* GAME PAGE */
.overlay {
	position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

#tutorial-box {
	position: relative;
	display: inline-block;
	top: 200px;
	width: 700px;
	height: 450px;
	border-radius: 20px;
	border: 3px solid white;
	background-color: #293E4A;
}

#btn-next {
	width: 80px;
}

.game-map {
	width: 900px;
	height: 100px;
	margin-top: 300px;
	background-color: white;
}

.endarea {
	width: 100px;
	height: 100px;
	margin-left: 800px;
	background-color: red;
	display: inline-block;
}

.eris {
	border-radius: 100%;
	width: 50px;
	height: 50px;
	display: inline-block;
	background-color: #4DB3B3;
	margin-right: 1000px;
	margin-top: 10px;
}

#gameover-box {
	position: relative;
	display: inline-block;
	top: 200px;
	width: 700px;
	height: 450px;
	border-radius: 20px;
	border: 3px solid white;
	background-color: #293E4A;
}
$(document).ready(function(){
  // Quiz JS
  // Global Default
  jconfirm.defaults = {
    boxWidth: '30%',
    useBootstrap: false,
  };

  var score = 0;

  $('#question-two').hide();
  $('#question-three').hide();
  $('#question-four').hide();
  $('#question-five').hide();
  $('#quiz-result').hide();

  $('.correct-q1').click(function(){
    score++
    console.log(score);
    $.confirm({
        title: 'Correct answer!',
        content: 'Insert Fact Here',
        type: 'green',
        typeAnimated: true,
        buttons: {
            tryAgain: {
                text: 'Next Question',
                btnClass: 'btn-green',
                action: function(){
                  $('#question-two').show();
                  $('#question-one').hide();
                  
                }
            },
        }
    });
  });

  $('.correct-q2').click(function(){
    score++
      console.log(score);
    $.confirm({
        title: 'Correct answer!',
        content: 'Insert Fact Here',
        type: 'green',
        typeAnimated: true,
        buttons: {
            tryAgain: {
                text: 'Next Question',
                btnClass: 'btn-green',
                action: function(){
                  $('#question-three').show();
                  $('#question-two').hide();
                }
            },
        }
    });
  });

  $('.correct-q3').click(function(){
    score++
      console.log(score);
    $.confirm({
        title: 'Correct answer!',
        content: 'Insert Fact Here',
        type: 'green',
        typeAnimated: true,
        buttons: {
            tryAgain: {
                text: 'Next Question',
                btnClass: 'btn-green',
                action: function(){
                  $('#question-four').show();
                  $('#question-three').hide();
                }
            },
        }
    });
  });

  $('.correct-q4').click(function(){
    score++
      console.log(score);
    $.confirm({
        title: 'Correct answer!',
        content: 'Insert Fact Here',
        type: 'green',
        typeAnimated: true,
        buttons: {
            tryAgain: {
                text: 'Next Question',
                btnClass: 'btn-green',
                action: function(){
                  $('#question-five').show();
                  $('#question-four').hide();
                }
            },
        }
    });
  });

  $('.correct-q5').click(function(){
    score++
      console.log(score);
    $.confirm({
        title: 'Correct answer!',
        content: 'Insert Fact Here',
        type: 'green',
        typeAnimated: true,
        buttons: {
            tryAgain: {
                text: 'Next Question',
                btnClass: 'btn-green',
                action: function(){
                  $('#question-five').hide();
                  $('#quiz-result').show();
                  $('#score').text(score);
                }
            },
        }
    });
  });
  //window.location.href = "index.html";




  $('.wrong-q1').click(function(){
    $.confirm({
        title: 'WRONG!',
        content: "This isn't the answer, choose another!",
        type: 'red',
        typeAnimated: true,
        buttons: {
            tryAgain: {
                text: 'Try Again',
                btnClass: 'btn-red',
            },
        }
    });
  });

  // End Quiz JS

});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js