drumfiend21/Front-end-quiz-game.markdown

## Front-end-quiz-game.markdown

      
    Raw
  

              Front-end-quiz-game.markdown
            
          
    Front End Quiz Game

Coded in an evening (for a technical interview :) ) by Siddharth Joshi

  
## index.html
<body>
  <img id="ship" style="display: none;" src="http://www.lacolony.org/images/Galleon_2.gif">
  <h1 id="instructions" style="display: none;">Complete all the trades on your journey!</h1>

  <div id="title" class="screen">
    <img id="title-image" src="https://jungleej.files.wordpress.com/2015/09/trade-trivia.png">
    <button id="start">START</button>
  </div>

  <div id="finish" class="screen" style="display: none;">
    <img id="chest" src="https://jungleej.files.wordpress.com/2015/09/chest1.png">
    <img id="star" src="http://www.achsbands.org/uploads/3/7/4/2/37427725/3010959.png">
    <p id="final-score"><p>
  </div>

  <div id="first-half" class="half" style="display: none;">
    <img id="united-states" class="land" src="https://jungleej.files.wordpress.com/2015/09/united-states.png">
    <img id="argentina"class="land" style="display: none;" src="https://jungleej.files.wordpress.com/2015/09/argentina1.png">
    <img id="dominican-republic" class="land" style="display: none;" src="https://jungleej.files.wordpress.com/2015/09/dominican-republic.png">
  </div>

  <div id="second-half" class="half" style="display: none;">
    <img id="angola" class="land" style="display: none;" src="https://jungleej.files.wordpress.com/2015/09/angola.png">
    <img id="sierra-leone" class="land" style="display: none;" src="https://jungleej.files.wordpress.com/2015/09/sierra-leone.png">
  </div>

  <img id="ocean" src="http://1.bp.blogspot.com/-i9u9j4aQg3A/U-8H2oLq_8I/AAAAAAAAS_A/Jlx0mxduyIo/s1600/pixel-art-ocean_luminous_arc.gif">

  <div id="card" style="display: none;">

    <p id="correct" class="counter">Trades Made: </p>
    <p id="num-correct" class="counter"></p>
    <p id="game-progress">Travel Completed</p>
    <div class="progress">
      <div id="bar" class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
        <span class="sr-only">60% Complete</span>
      </div>
    </div>

    <img id="paper" src="http://img12.deviantart.net/b615/i/2013/327/6/9/papyrus___personal_use_only_by_moonlight4ngel-d2xjn6k.png">
    <img id="badge"  src="http://www.wpclipart.com/blanks/buttons/round/button_round_yellow_T.png">

    <h1 id="country-welcome"></h1>
    <h2>To make your trade in our port, please answer our simple question.</h2>
    <h3 id="question"></h3>
    <form id="answers" class="answers">
      <input id="radio0" type="radio" name="answer" value="">
      <p id="ans0"></p>
      <br>
      <input id="radio1" type="radio" name="answer" value="">
      <p id="ans1"></p>
      <br>
      <input id="radio2" type="radio" name="answer" value="">
      <p id="ans2"></p>
    </form>

    <button id="submit" type="button" class="btn btn-default">Submit Answer</button>
  </div>
</body>


## script.js
var init = false;
var current = 0;
var progress = 0;
var answeredCorrectly = 0;
var countries = [
  "United States",
  "Angola",
  "Argentina",
  "Sierra Leone",
  "Dominican Republic"
];

var countryId = [
  "united-states",
  "angola",
  "argentina",
  "sierra-leone",
  "dominican-republic"
];

var answers = [
  [
    "Boston",
    "Washington D.C.",
    "Boone"
  ],
  [
    "Luanda",
    "Huambo",
    "Lobito"
  ],
  [
    "Rosario",
    "Cordoba",
    "Buenos Aires"
  ],
  [
    "Kenema",
    "Freetown",
    "Bo"
  ],
  [
    "La Romana",
    "Santiago",
    "Santo Domingo"
  ]
];

var correctAnswers = [1,0,2,1,2];

var animateCounter = function(){
    $("#badge").animate({
      top: "-=2%"
    }, 200);
  $("#badge").animate({
      top: "+=2%"
    }, 200);
}

var flipShip = function(bool){
  if(bool === false){
    $("#ship").addClass('flipped');
  }
  if(bool === true){
    $("#ship").removeClass('flipped');
  }
}

var setWelcome = function(){
  $('#country-welcome').text("Welcome to "+countries[current]+"!");
}

var evaluateAnswer = function(){
  if($("input:checked").val() === answers[current][correctAnswers[current]]){
    animateCounter();
    answeredCorrectly++;
  }
  //update display
  $('#num-correct').text(answeredCorrectly);
  if(init === true){
    setProgressBar();
  }
  init = true;
}

var setQuestion = function(){
  $('#question').text("What is the capital of "+countries[current]+"?");
}

var setAnswers = function(){
  for(var i=0; i < 3; i++){
    $("#radio"+i).val(answers[current][i]);
    $("#ans"+i).text(answers[current][i]);
  }
}

var setProgressBar = function(){
  progress = progress + 20;
  $("#bar").css("width", progress+"%")
};

var changeCard = function(){
  setWelcome();
  setQuestion();
  setAnswers();
}

var scene = function(shipMove, landMove, order, bool){
    $("#card").delay(1000).fadeOut("slow", function(){
      //set card
      $(":radio").prop('checked', false);
      changeCard();
      //move ship
      flipShip(bool);
      $("#ship").show().animate({
        left: shipMove
      }, 5000)
      $("#"+countryId[current]).show();
      //move land
      $("#first-half").show().animate({
        left: landMove,
      }, 5000, function(){});
      $("#second-half").show().animate({
        left: landMove,
      }, 5000, function() {
        //remove old images
        $("#"+order+"-half").hide();
        $("#"+countryId[current-1]).hide();
        //fade in card
        $("#card").fadeIn();
      });
    });
}

var finishGame = function(){
  $("#card").fadeOut('slow', function(){
      $("#final-score").text(answeredCorrectly+"/5!");
      $("#finish").fadeIn();
      $("#start").hide();
      $("#title").fadeIn();
    });
}

var changeScene = function(){
  if(current === 0 || current === 2){
    scene("+=45%", "-=50%", "first", true);
  }
  if(current ===1){
    scene("-=35%", "+=50%", "second", false);
  }
  if(current===3){
    scene("-=55%", "+=50%", "second", false);
  }
  if(current === 4){
    finishGame()
  }
}

//Submit actions
$('#submit').on('click', function(){
  if(current < 5 && $("input:checked" ).length > 0){
    evaluateAnswer();
    changeScene();
    current = current+1;
  }
})

//Initialize card
setWelcome();
setQuestion();
setAnswers();
evaluateAnswer();

//Initialize Scene
$('#start').on('click', function(){
  $("#title").fadeOut();
  $("#instructions").fadeIn();
  //move ship
  flipShip(false);
  $("#ship").show()
    .animate({
    left: "-=80%"
  }, 5000)
  //move land
  $("#first-half").show().animate({
      left: "+=50%",
    }, 5000, function() {
      $("#instructions").fadeOut();
      $("#card").fadeIn();
  });
})


## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

## style.css
body {
  margin: 0 auto;
}

#ocean {
  display: block;
  width: 100%;
  height: 100%;
  z-index: -3;
}

#instructions{
 position: absolute;
 z-index: 4;
 left: 28%;
 top: 20%;
 color: rgb(250,210,80);
 text-shadow: 0 0 6px black;
}

.screen{
 left: 24%;
 top: 40%;
}

#title{
 position: absolute;
 z-index: 3;
}

#finish{
 position: absolute;
 z-index: 2;
}

#star{
  width: 300px;
  margin-left: -350px;
}

#final-score{
  position: absolute;
  z-index: 3;
  top: 38%;
  right: 29%;
  font-size: 40px;
  color: brown;
}

#chest{
  margin-left: 150px;
}

#start{
  display: block;
  width: 200px;
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 10px;
	color: yellow;
	background-image: linear-gradient(rgb(98, 196, 98), rgb(81, 163, 81));
  font-size: 20px;
}

#ship{
 position: absolute;
 z-index: 3;
 left: 100%;
 top: 20%;
}

.half{
  position: absolute;
  z-index: 2;
  width: 50%;
  height: 100%;
}

#first-half{
  left: -50%;
}

#second-half{
  left: 100%;
}

.land{
  position: absolute;
  z-index: 1;
  width: 100%;
}

#united-states{
 left: 0;
 top: -10%;
}
#angola{
 left: 40%;
}
#argentina{
 left: 0;
}
#sierra-leone{
 right: -45%;
 top: -40%;
}
#dominican-republic{
 right: 35%;
}

#welcome{
 position: absolute;
 z-index: 1;
}

#card{
 display: block;
 padding: 5%;
 position: absolute;
 z-index: 4;
 left: 30%;
 top: 40%;
 width: 40%;
 height: 150px;
 font-size: 12px;
}

#paper{
 display: block;
 position: absolute;
 z-index: -2;
 left: 0;
 top: -40%;
 width: 100%;
}

#badge{
 display: block;
 position: absolute;
 z-index: -1;
 top: -25.5%;
 left: 55.6%;
 height: 15px;
 width: 15px;
}

#country-welcome{
  text-align: center;
  margin-top: 30px;
  margin-bottom: -15px;
  font-size: 22px;
}

h2{
  color: maroon;
  text-align: center;
  font-size: 14px;
}

.counter{
  position: absolute;
  margin-top: -105px;
  text-align: center;
  font-size: 10px;
}

#correct{
  margin-left: 31.5%;
}

#num-correct{
  color: green;
  font-weight: bold;
  margin-left: 44%;
}

#game-progress{
  position: absolute;
  margin-top: -77px;
  margin-left: 31%;
  color: brown;
  text-align: center;
  font-size: 10px;
}

.progress{
  margin: auto;
  margin-top: -80px;
  margin-bottom: 15px;
  width: 60%;
}

input{
  display: inline-block;
}

p{
  display: inline;
}

.answers{
  color: black;
  padding-left: 37%;
  font-size: 12px;
}

#question{
  color: black;
  text-align: center;
  font-size: 14px;
  margin-top: 20px;
}

#submit{
  height:30px;
  width:100px;
  top:50%;
  left:50%;
  position:relative;
  margin: -50px;
  margin-top: -5px;
  padding: 1%;
  background-image: linear-gradient(rgb(201, 162, 129), rgb(133, 76, 30));
  border-radius: 5px;
  font-size: 12px;
}

.flipped {
    transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -khtml-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
}

## styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
	<body>
	<img id="ship" style="display: none;" src="http://www.lacolony.org/images/Galleon_2.gif">
	<h1 id="instructions" style="display: none;">Complete all the trades on your journey!</h1>

	<div id="title" class="screen">
	<img id="title-image" src="https://jungleej.files.wordpress.com/2015/09/trade-trivia.png">
	<button id="start">START</button>
	</div>

	<div id="finish" class="screen" style="display: none;">
	<img id="chest" src="https://jungleej.files.wordpress.com/2015/09/chest1.png">
	<img id="star" src="http://www.achsbands.org/uploads/3/7/4/2/37427725/3010959.png">
	<p id="final-score"><p>
	</div>

	<div id="first-half" class="half" style="display: none;">
	<img id="united-states" class="land" src="https://jungleej.files.wordpress.com/2015/09/united-states.png">
	<img id="argentina"class="land" style="display: none;" src="https://jungleej.files.wordpress.com/2015/09/argentina1.png">
	<img id="dominican-republic" class="land" style="display: none;" src="https://jungleej.files.wordpress.com/2015/09/dominican-republic.png">
	</div>

	<div id="second-half" class="half" style="display: none;">
	<img id="angola" class="land" style="display: none;" src="https://jungleej.files.wordpress.com/2015/09/angola.png">
	<img id="sierra-leone" class="land" style="display: none;" src="https://jungleej.files.wordpress.com/2015/09/sierra-leone.png">
	</div>

	<img id="ocean" src="http://1.bp.blogspot.com/-i9u9j4aQg3A/U-8H2oLq_8I/AAAAAAAAS_A/Jlx0mxduyIo/s1600/pixel-art-ocean_luminous_arc.gif">

	<div id="card" style="display: none;">

	<p id="correct" class="counter">Trades Made: </p>
	<p id="num-correct" class="counter"></p>
	<p id="game-progress">Travel Completed</p>
	<div class="progress">
	<div id="bar" class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
	<span class="sr-only">60% Complete</span>
	</div>
	</div>

	<img id="paper" src="http://img12.deviantart.net/b615/i/2013/327/6/9/papyrus___personal_use_only_by_moonlight4ngel-d2xjn6k.png">
	<img id="badge" src="http://www.wpclipart.com/blanks/buttons/round/button_round_yellow_T.png">

	<h1 id="country-welcome"></h1>
	<h2>To make your trade in our port, please answer our simple question.</h2>
	<h3 id="question"></h3>
	<form id="answers" class="answers">
	<input id="radio0" type="radio" name="answer" value="">
	<p id="ans0"></p>
	<br>
	<input id="radio1" type="radio" name="answer" value="">
	<p id="ans1"></p>
	<br>
	<input id="radio2" type="radio" name="answer" value="">
	<p id="ans2"></p>
	</form>

	<button id="submit" type="button" class="btn btn-default">Submit Answer</button>
	</div>
	</body>
	var init = false;
	var current = 0;
	var progress = 0;
	var answeredCorrectly = 0;
	var countries = [
	"United States",
	"Angola",
	"Argentina",
	"Sierra Leone",
	"Dominican Republic"
	];

	var countryId = [
	"united-states",
	"angola",
	"argentina",
	"sierra-leone",
	"dominican-republic"
	];

	var answers = [
	[
	"Boston",
	"Washington D.C.",
	"Boone"
	],
	[
	"Luanda",
	"Huambo",
	"Lobito"
	],
	[
	"Rosario",
	"Cordoba",
	"Buenos Aires"
	],
	[
	"Kenema",
	"Freetown",
	"Bo"
	],
	[
	"La Romana",
	"Santiago",
	"Santo Domingo"
	]
	];

	var correctAnswers = [1,0,2,1,2];

	var animateCounter = function(){
	$("#badge").animate({
	top: "-=2%"
	}, 200);
	$("#badge").animate({
	top: "+=2%"
	}, 200);
	}

	var flipShip = function(bool){
	if(bool === false){
	$("#ship").addClass('flipped');
	}
	if(bool === true){
	$("#ship").removeClass('flipped');
	}
	}

	var setWelcome = function(){
	$('#country-welcome').text("Welcome to "+countries[current]+"!");
	}

	var evaluateAnswer = function(){
	if($("input:checked").val() === answers[current][correctAnswers[current]]){
	animateCounter();
	answeredCorrectly++;
	}
	//update display
	$('#num-correct').text(answeredCorrectly);
	if(init === true){
	setProgressBar();
	}
	init = true;
	}

	var setQuestion = function(){
	$('#question').text("What is the capital of "+countries[current]+"?");
	}

	var setAnswers = function(){
	for(var i=0; i < 3; i++){
	$("#radio"+i).val(answers[current][i]);
	$("#ans"+i).text(answers[current][i]);
	}
	}

	var setProgressBar = function(){
	progress = progress + 20;
	$("#bar").css("width", progress+"%")
	};

	var changeCard = function(){
	setWelcome();
	setQuestion();
	setAnswers();
	}

	var scene = function(shipMove, landMove, order, bool){
	$("#card").delay(1000).fadeOut("slow", function(){
	//set card
	$(":radio").prop('checked', false);
	changeCard();
	//move ship
	flipShip(bool);
	$("#ship").show().animate({
	left: shipMove
	}, 5000)
	$("#"+countryId[current]).show();
	//move land
	$("#first-half").show().animate({
	left: landMove,
	}, 5000, function(){});
	$("#second-half").show().animate({
	left: landMove,
	}, 5000, function() {
	//remove old images
	$("#"+order+"-half").hide();
	$("#"+countryId[current-1]).hide();
	//fade in card
	$("#card").fadeIn();
	});
	});
	}

	var finishGame = function(){
	$("#card").fadeOut('slow', function(){
	$("#final-score").text(answeredCorrectly+"/5!");
	$("#finish").fadeIn();
	$("#start").hide();
	$("#title").fadeIn();
	});
	}

	var changeScene = function(){
	if(current === 0 \|\| current === 2){
	scene("+=45%", "-=50%", "first", true);
	}
	if(current ===1){
	scene("-=35%", "+=50%", "second", false);
	}
	if(current===3){
	scene("-=55%", "+=50%", "second", false);
	}
	if(current === 4){
	finishGame()
	}
	}

	//Submit actions
	$('#submit').on('click', function(){
	if(current < 5 && $("input:checked" ).length > 0){
	evaluateAnswer();
	changeScene();
	current = current+1;
	}
	})

	//Initialize card
	setWelcome();
	setQuestion();
	setAnswers();
	evaluateAnswer();

	//Initialize Scene
	$('#start').on('click', function(){
	$("#title").fadeOut();
	$("#instructions").fadeIn();
	//move ship
	flipShip(false);
	$("#ship").show()
	.animate({
	left: "-=80%"
	}, 5000)
	//move land
	$("#first-half").show().animate({
	left: "+=50%",
	}, 5000, function() {
	$("#instructions").fadeOut();
	$("#card").fadeIn();
	});
	})
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
	body {
	margin: 0 auto;
	}

	#ocean {
	display: block;
	width: 100%;
	height: 100%;
	z-index: -3;
	}

	#instructions{
	position: absolute;
	z-index: 4;
	left: 28%;
	top: 20%;
	color: rgb(250,210,80);
	text-shadow: 0 0 6px black;
	}

	.screen{
	left: 24%;
	top: 40%;
	}

	#title{
	position: absolute;
	z-index: 3;
	}

	#finish{
	position: absolute;
	z-index: 2;
	}

	#star{
	width: 300px;
	margin-left: -350px;
	}

	#final-score{
	position: absolute;
	z-index: 3;
	top: 38%;
	right: 29%;
	font-size: 40px;
	color: brown;
	}

	#chest{
	margin-left: 150px;
	}

	#start{
	display: block;
	width: 200px;
	margin: 0 auto;
	margin-top: 20px;
	border-radius: 10px;
	color: yellow;
	background-image: linear-gradient(rgb(98, 196, 98), rgb(81, 163, 81));
	font-size: 20px;
	}

	#ship{
	position: absolute;
	z-index: 3;
	left: 100%;
	top: 20%;
	}

	.half{
	position: absolute;
	z-index: 2;
	width: 50%;
	height: 100%;
	}

	#first-half{
	left: -50%;
	}

	#second-half{
	left: 100%;
	}

	.land{
	position: absolute;
	z-index: 1;
	width: 100%;
	}

	#united-states{
	left: 0;
	top: -10%;
	}
	#angola{
	left: 40%;
	}
	#argentina{
	left: 0;
	}
	#sierra-leone{
	right: -45%;
	top: -40%;
	}
	#dominican-republic{
	right: 35%;
	}

	#welcome{
	position: absolute;
	z-index: 1;
	}

	#card{
	display: block;
	padding: 5%;
	position: absolute;
	z-index: 4;
	left: 30%;
	top: 40%;
	width: 40%;
	height: 150px;
	font-size: 12px;
	}

	#paper{
	display: block;
	position: absolute;
	z-index: -2;
	left: 0;
	top: -40%;
	width: 100%;
	}

	#badge{
	display: block;
	position: absolute;
	z-index: -1;
	top: -25.5%;
	left: 55.6%;
	height: 15px;
	width: 15px;
	}

	#country-welcome{
	text-align: center;
	margin-top: 30px;
	margin-bottom: -15px;
	font-size: 22px;
	}

	h2{
	color: maroon;
	text-align: center;
	font-size: 14px;
	}

	.counter{
	position: absolute;
	margin-top: -105px;
	text-align: center;
	font-size: 10px;
	}

	#correct{
	margin-left: 31.5%;
	}

	#num-correct{
	color: green;
	font-weight: bold;
	margin-left: 44%;
	}

	#game-progress{
	position: absolute;
	margin-top: -77px;
	margin-left: 31%;
	color: brown;
	text-align: center;
	font-size: 10px;
	}

	.progress{
	margin: auto;
	margin-top: -80px;
	margin-bottom: 15px;
	width: 60%;
	}

	input{
	display: inline-block;
	}

	p{
	display: inline;
	}

	.answers{
	color: black;
	padding-left: 37%;
	font-size: 12px;
	}

	#question{
	color: black;
	text-align: center;
	font-size: 14px;
	margin-top: 20px;
	}

	#submit{
	height:30px;
	width:100px;
	top:50%;
	left:50%;
	position:relative;
	margin: -50px;
	margin-top: -5px;
	padding: 1%;
	background-image: linear-gradient(rgb(201, 162, 129), rgb(133, 76, 30));
	border-radius: 5px;
	font-size: 12px;
	}

	.flipped {
	transform: scale(-1, 1);
	-moz-transform: scale(-1, 1);
	-webkit-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	-khtml-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	}