Skip to content

Instantly share code, notes, and snippets.

@v
Created April 5, 2017 22:49
Show Gist options
  • Save v/07ec3f42fc5a6dd997ae2aa8fab31c3d to your computer and use it in GitHub Desktop.
Save v/07ec3f42fc5a6dd997ae2aa8fab31c3d to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=07ec3f42fc5a6dd997ae2aa8fab31c3d
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div class="mask">
<div id = "blast"><img src="https://media.tenor.co/images/513e803a0af2bfe18a9a43a46917118d/tenor.gif"></div>
<img src="http://vignette1.wikia.nocookie.net/town-of-salem/images/4/4d/Yuan_Itor.png/revision/latest?cb=20160826042531" id="logo">
<h1> The Space Janitor Quiz Game </h1>
<span class="Q1">Q1. How fast does a piece of trash travel when it is orbiting the earth? </span>
<form>
<label>
A:
<input type="radio" name="Q1" />
250 mph
</label><br>
<label>
B:
<input type="radio" name="Q1" />
50 mph
</label>
<label><br>
C:
<input type="radio" name="Q1" />
1720 mph
</label><br>
<label class="right">
D:
<input type="radio" name="Q1" />
17500 mph
</label>
</form>
<br>
<span class= "Q1"> Q2. How many pounds of trash is there on the moon?</span>
<form>
<label class="right">
A:
<input type="radio" name="Q2"/>
400,000 pounds
</label><br>
<label>
B:
<input type="radio" name="Q2" />
4,000 pounds
</label><br>
<label>
C:
<input type="radio" name="Q2" />
400 pounds
</label><br>
<label>
D:
<input type="radio" name="Q2" />
There is no trash on the moon
</label><br>
</form>
<br>
<span class= "Q1"> Q3. Who was the first person to leave trash in space?</span>
<form>
<label >
A:
<input type="radio" name="Q3"/>
Neil Armstrong
</label><br>
<label>
B:
<input type="radio" name="Q3" />
Eartha Kitt
</label><br>
<label class="right">
C:
<input type="radio" name="Q3" />
Yuri Gagarin
</label><br>
<label>
D:
<input type="radio" name="Q3" />
Tom Hanks
</label><br>
</form>
<br>
<div id="right">Right: 0</div>
<div id="wrong">Wrong: 0</div>
<div id="percentage">Percent: 0</div>
<img src="http://www.clipartbest.com/cliparts/dcr/6GR/dcr6GRyKi.png" id="sun">
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
{"enabledLibraries":["jquery"]}
$("#blast").hide();
var right = 0, wrong = 0;
function updateScores() {
$("#right").html("Right: " + right);
$("#wrong").html("Wrong: " + wrong);
$("#percentage").html("Percent: " + right / (right + wrong));
}
$("label:not(.right)").click(function(){
var form = $(this).closest('form');
if (!form.hasClass('answered')) {
form.addClass('answered');
alert("Wrong Answer, Doofus!");
wrong++;
updateScores();
}
});
$(".right").click(function(){
var form = $(this).closest('form');
if (!form.hasClass('answered')) {
form.addClass('answered');
right++;
alert("Right Answer");
updateScores();
}
if(right === 3 ){
$("#blast").show();
}
});
setInterval(function() {
var margin_left = parseInt($("#sun").css("margin-left"));
$("#sun").css('margin-left', (margin_left + 10) % 500);
}, 100);
body {
background-image: url("https://media.tenor.co/images/5dd9a2314f1bb9d59d8cf54b85116590/tenor.gif");
background-size:cover;
background-repeat:no-repeat;
}
.Q1 {
color: #207401;
}
h1 {
color: #800080;
}
#logo {
height: 100px;
float: right;
}
#logo:hover {
animation:spin 2s linear infinite;
}
.answered .right {
color: green;
}
.answered label{
color:red;
}
#sun {
width: 200px;
margin-left: 10px;
animation:spin 2s linear infinite;
}
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.mask {
padding: 0 10px;
background: #ddd;
opacity: 0.8;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment