Skip to content

Instantly share code, notes, and snippets.

@drumfiend21

drumfiend21/Front-end-quiz-game.markdown

Last active September 3, 2015 18:32
Show Gist options
  • Save drumfiend21/11b58c8a4adfe37c5e5a to your computer and use it in GitHub Desktop.
Save drumfiend21/11b58c8a4adfe37c5e5a to your computer and use it in GitHub Desktop.
Download ZIP
Front End Quiz Game
Raw
Front-end-quiz-game.markdown

Front End Quiz Game

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

Raw
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>
Raw
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();
});
})
Raw
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>
Raw
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);
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment