Created
April 5, 2017 22:49
-
-
Save v/07ec3f42fc5a6dd997ae2aa8fab31c3d to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=07ec3f42fc5a6dd997ae2aa8fab31c3d
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"enabledLibraries":["jquery"]} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $("#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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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