I made this Batman quiz... About Batman.
Forked from Ross Whitehouse's Pen Ross' Slightly Geeky Batman Quiz.
Created
June 28, 2014 16:56
-
-
Save sync101/4a58e06dc8749f0ca77e to your computer and use it in GitHub Desktop.
A Pen by sync101.
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
| <head> | |
| <link href='http://fonts.googleapis.com/css?family=Maven+Pro' rel='stylesheet' type='text/css'> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <div class="home"> | |
| <h1>Ross' Batman Quiz!</h1> | |
| Check out which Batman character you are!<br/> | |
| <input class="home-button" type="button" value="Let's Get Started"> | |
| </div> | |
| <div class="picture"><img src="http://jkyyuen.files.wordpress.com/2013/02/batman.png" class="batman"></div> | |
| <div class="main"> | |
| <div class="title"> | |
| Ross' Slightly Geeky Batman Quiz | |
| </div> | |
| <div class="questions"> | |
| <div class="question1"> | |
| What kind of music do you like the most? | |
| <div class="answerA">A. Rock</div> | |
| <div class="answerB">B. Pop</div> | |
| <div class="answerC">C. Rap</div> | |
| </div> | |
| <div class="question2"> | |
| And what kind of video games? | |
| <div class="answerB">A. Casual/Arcade</div> | |
| <div class="answerC">B. First-Person Shooters</div> | |
| <div class="answerA">C. RPGs</div> | |
| </div> | |
| <div class="question3"> | |
| If you found a wallet on the street, full of money, what would you do with it? | |
| <div class="answerC">A. Keep the money!</div> | |
| <div class="answerA">B. Give the wallet to the police.</div> | |
| <div class="answerB">C. Try to find the guy who's wallet it is by yourself.</div> | |
| </div> | |
| <div class="question4"> | |
| Who's your best friend? | |
| <div class="answerC">A. Nobody. People suck.</div> | |
| <div class="answerA">B. Hard to say. I have a lot of friends and I'm close to all of them...</div> | |
| <div class="answerB">C. I kind of keep myself to myself. I suppose there's Jim. I'm pretty close to Jim. Or my Butler...</div> | |
| </div> | |
| <div class="question5"> | |
| Who is your Idol? | |
| <div class="answerC">A. I don't idolise anything but chaos.</div> | |
| <div class="answerA">B. I look up to anyone doing the right thing. That guy with the red cape? He seems like a good guy...</div> | |
| <div class="answerB">C. I idolise money. Money money money.</div> | |
| </div> | |
| <input type="button" class="submit" value="SUBMIT"> | |
| <div class="submit-div"> | |
| </div> | |
| <div class="backtotop"> | |
| <input type="button" value="Back to Top"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> |
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
| $('.home-button').click(function(){ | |
| $('.home').slideToggle(); | |
| $('.main').show(); | |
| }); | |
| $('.answerA').click(function(){ | |
| $(this).addClass('selected'); | |
| $(this).siblings().removeClass('selected'); | |
| }); | |
| $('.answerB').click(function(){ | |
| $(this).addClass('selected'); | |
| $(this).siblings().removeClass('selected'); | |
| }); | |
| $('.answerC').click(function(){ | |
| $(this).addClass('selected'); | |
| $(this).siblings().removeClass('selected'); | |
| }); | |
| $('.submit').click(function(){ | |
| var A = $('.selected.answerA').length; | |
| var B = $('.answerB.selected').length; | |
| var C = $('.answerC.selected').length; | |
| console.log(A); | |
| console.log(B); | |
| console.log(C); | |
| $('body').css('color', 'white'); | |
| $('.backtotop').show(); | |
| $('.backtotop').click(function(){ | |
| $('html, body').animate({ | |
| scrollTop: 0 | |
| }, 200); | |
| $('.backtotop').hide(); | |
| }); | |
| $(".batman").hide(); | |
| if((A>B)&&(A>C)){$(".submit-div").html('<div class="result"><div class="result-title">SUPERMAN</div><br />You\'re an all-out good guy. Nobody can argue when it comes to doing the best thing you\'re the man. Even if Bruce thinks you\'re a boy-scout.</div>'); | |
| //Picture Part | |
| $(".picture").html("<img src='http://static.comicvine.com/uploads/original/13/132703/2653109-can.png' class='superman'>"); | |
| $('body').css('background', '#2980B9'); | |
| $('html, body').animate({ | |
| scrollTop: $('.superman').offset().top | |
| }, 400); | |
| } | |
| if((A>B)&&(B>C)){$(".submit-div").html('<div class="result"><div class="result-title">JIM GORDON</div><br />Nobody argues that when it comes to cops, you\'re the best of the lot. In a sea of corruption and deciept, you serve as a shining example to everyone around. Even still, times are hard. And you appreciate the need to bend the rules every now and then.</div>'); | |
| //Picture Part | |
| $(".picture").html("<img src='http://bakarenders.com/renders/albums/userpics/21033/normal_JimGordon-001.png' class='gordon'>"); | |
| $('body').css('background', '#C0392B'); | |
| $('html, body').animate({ | |
| scrollTop: $('.gordon').offset().top | |
| }, 400); | |
| } | |
| if((A==B)&&(A>C)){$(".submit-div").html('<div class="result"><div class="result-title">ROBIN</div><br />As Batman\'s moral compass, you remind him that he is there to do the right thing, and stop him losing his edge. Coupled with all of the butt-kicking you do, you have your work cut out. But you know your duty and are happy to do it!</div>'); | |
| //Picture Part | |
| $(".picture").html("<img src='http://bakarenders.com/renders/albums/userpics/21033/normal_Robin-001.png' class='robin'>"); | |
| $('body').css('background', 'green'); | |
| $('html, body').animate({ | |
| scrollTop: $('.robin').offset().top | |
| }, 400); | |
| } | |
| if((B>A)&&(B>C)){$(".submit-div").html('<div class="result"><div class="result-title">ALFRED</div><br />A faithful servant, you\'ve had your share of bad decisions, but you\'ve only ever had the interest of your friends at heart.</div>'); | |
| //Picture Part | |
| $(".picture").html("<img src='http://www.comicsblend.com/wp-content/uploads/2014/01/gettoknow_alfred_alt2.png' class='alfred'>"); | |
| $('body').css({'background':'#333'}); | |
| $('html, body').animate({ | |
| scrollTop: $('.alfred').offset().top | |
| }, 400); | |
| } | |
| if((B>A)&&(A>C)){$(".submit-div").html('<div class="result"><div class="result-title">BATMAN</div><br />You are a metaphor for some of Gotham City\'s darkest hour, and are determined to drag the city from the clutches of evil, though you understand that to do this, you must become a criminal. You separate yourself from the scum you deter, however, by never killing an enemy, only doing what is necessary to stop them.</div>'); | |
| //Picture Part | |
| $(".picture").html("<img src='http://jkyyuen.files.wordpress.com/2013/02/batman.png' class='batman2'>"); | |
| $('html, body').animate({ | |
| scrollTop: $('.batman2').offset().top | |
| }, 400);} | |
| if((B>C)&&(C>A)){$(".submit-div").html('<div class="result"><div class="result-title">PENGUIN</div><br />You\'re a bad guy. Everyone knows you\'re a bad guy. But, all the same, you\'re kind of the joke of the bad guys. You aren\'t exactly evil... More angry with the world. And you like fish.</div>'); | |
| //Picture Part | |
| $(".picture").html("<img src='http://img3.wikia.nocookie.net/__cb20130918202628/marvel_dc/images/1/1c/Batman_Vol_2_23.3_The_Penguin_Textless.jpg' class='penguin'>"); | |
| $('body').css({'background':'white', 'color':'black'}); | |
| $('html, body').animate({ | |
| scrollTop: $('.penguin').offset().top | |
| }, 400); | |
| } | |
| if((C==B)&&(B>A)){$(".submit-div").html('<div class="result"><div class="result-title">RIDDLER</div><br/>You count yourself amongst the most intellectual of your peers and you aren\'t far wrong. You\'re a devious, clever, underhanded baddie who loves to get one up on those ignorant do-gooders.</div>'); | |
| //Picture Part | |
| $(".picture").html("<img src='http://fc09.deviantart.net/fs71/f/2013/118/8/3/batman_arkham_city_riddler_render_by_american_paladin-d63crqo.png' class='riddler'>"); | |
| $('body').css('background', '#197316'); | |
| $('html, body').animate({ | |
| scrollTop: $('.riddler').offset().top | |
| }, 400);} | |
| if((C>B)&&(C>A)){$(".submit-div").html('<div class="result"><div class="result-title">JOKER</div><br />Evil incarnate, people fear you and never know what you\'ll do next. Just the sight of you strikes fear into the heart of most, but nobody\'s managed to stop you yet. Not for long, anyway.</div>'); | |
| //Picture Part | |
| $(".picture").html("<img src='http://fc02.deviantart.net/fs70/f/2013/019/1/a/joker_black_and_white_colored_in_ps_by_zerods111-d5ryjiq.png' class='joker'>"); | |
| $('body').css('background','#8E44AD'); | |
| $('html, body').animate({ | |
| scrollTop: $('.joker').offset().top | |
| }, 400);} | |
| if((C>B)&&(B>A)){$(".submit-div").html('<div class="result"><div class="result-title">TWO-FACE</div><br />Everyone knows you\'re a nasty piece of work, and so nobody ever crosses you. They know what you\'d do to them! Maybe you used to be more of an idealist, but maybe you\'ve always had this evil side in you.</div>'); | |
| //Picture Part | |
| $(".picture").html("<img src='http://img2.wikia.nocookie.net/__cb20110315234910/batman/images/7/7a/Two-face.png' class='face'>"); | |
| $('body').css({'background-image':'url(http://1.bp.blogspot.com/-w4P1FHSrXWM/UN04v4eixnI/AAAAAAAAAeg/4Q_kagUkd6E/s1600/scar1.jpg)', 'background-repeat':'no-repeat', 'background-size':'cover', '-webkit-background-size':'cover', '-o-background-size':'cover', '-moz-background-size':'cover'}); | |
| $('html, body').animate({ | |
| scrollTop: $('.face').offset().top | |
| }, 400);} | |
| if((A==C)&&(A>B)){$(".submit-div").html('<div class="result"><div class="result-title">CATWOMAN</div><br />\'Good\' and \'bad\' hardly apply to you. You\'ve done some heroic things, and you\'ve done some terrible things too, but all for profit. You have a good heart and a bad attitude, and you\'re so unpredictable! A girl has to do what a girl has to do, right?</div>'); | |
| //Picture Part | |
| $(".picture").html("<img src='http://rollingout.com/wp-content/uploads/2012/07/catwoman.png' class='cat'>"); | |
| $('body').css('background', '#2C3E50'); | |
| $('html, body').animate({ | |
| scrollTop: $('.cat').offset().top | |
| }, 400);} | |
| }); |
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
| *{ | |
| font-family: 'Maven Pro'; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| h1 { | |
| margin-bottom: 10px; | |
| font-size: 80px; | |
| } | |
| body { | |
| font-family: helvetica; | |
| background: #2C3E50; | |
| color: white; | |
| } | |
| .batman, .superman, .gordon, .robin, .batman2, .alfred, .penguin, .riddler, .face, .joker, .cat { | |
| float: right; | |
| height: 900px; | |
| } | |
| .cat{ | |
| margin-top: 700px; | |
| } | |
| .joker { | |
| margin-top: 700px; | |
| } | |
| .face { | |
| margin-top: 700px; | |
| margin-right: 70px; | |
| } | |
| .riddler { | |
| margin-top: 700px; | |
| height: 920px; | |
| } | |
| .gordon, .alfred { | |
| float: right; | |
| height: 600px; | |
| margin-top: 1000px; | |
| } | |
| .penguin {margin-top: 690px;} | |
| .batman2 { | |
| margin-top: 900px; | |
| } | |
| .superman { | |
| margin-right: 30px; | |
| margin-top: 900px; | |
| } | |
| .robin { | |
| height: 500px; | |
| margin-top: 1100px; | |
| } | |
| /*$(window).scrollTop($(".superman").offset().top);*/ | |
| .result { | |
| margin-top: 280px; | |
| margin-left: 200px; | |
| font-size: 20px; | |
| max-width: 500px; | |
| } | |
| .backtotop { | |
| display: none; | |
| margin-top: 30px; | |
| margin-left: 200px; | |
| } | |
| .result-title { | |
| font-size: 200%; | |
| } | |
| .home { | |
| margin-top: 40px; | |
| margin-left: 200px; | |
| font-size: 30px; | |
| } | |
| .home-button { | |
| font-size: 50px; | |
| margin-top: 20px; | |
| } | |
| .title { | |
| margin-top: 20px; | |
| margin-left: 70px; | |
| font-size: 250%; | |
| } | |
| .answerA, .answerB, .answerC { | |
| margin-top: 5px; | |
| cursor: pointer; | |
| } | |
| .question1, .question2, .question3, .question4, .question5 { | |
| margin-bottom: 30px; | |
| } | |
| .selected { | |
| color: red; | |
| } | |
| .questions { | |
| margin: 40px 100px; | |
| } | |
| .main{ | |
| display: none; | |
| } | |
| @media screen and (max-width: 960px){ | |
| .batman, .superman, .gordon, .robin, .batman2, .alfred, .penguin, .riddler, .face, .joker, .cat { | |
| height: 500px; | |
| } | |
| } | |
| @media screen and (max-width: 720px){ | |
| .batman, .superman, .gordon, .robin, .batman2, .alfred, .penguin, .riddler, .face, .joker, .cat { | |
| height: 250px; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment