A JQuery Mobile Quiz Game

Developer
Lisa Macken
Size
4,406 Kb
Views
109,296
  1. A JQuery Mobile Quiz Game Previews
  2. A JQuery Mobile Quiz Game HTML Codes
  3. A JQuery Mobile Quiz Game CSS Codes
  4. A JQuery Mobile Quiz Game JS Codes

How do I make an a jquery mobile quiz game?

Here we have a jquery mobile game. It is currently a true/false quiz game. jQuery Mobile provides the interface and structure. Programatically generated popup dialogs bring in new questions with fun transitions. Facts are either true false and are compared against user input.. What is a a jquery mobile quiz game? How do you make a a jquery mobile quiz game? This script and codes were developed by Lisa Macken on 01 October 2022, Saturday.

A JQuery Mobile Quiz Game Previews
IQ Test

A JQuery Mobile Quiz Game - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A JQuery Mobile Quiz Game</title> <link rel='stylesheet prefetch' href='https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css'>
<link rel='stylesheet prefetch' href='http://willgdev.com/quiz/jquery.mobile.flatui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- The Home Page -->
<div data-role="page" id="main" data-theme="b"> <div data-role="header"> <h1>Will G Quiz Apples</h1> </div> <div data-role="ui-content" style="margin-top:15px;"> <ul data-role="listview" data-inset="true"> <li><a href="#trueFalseGames" data-transition="slide">True False Games</a> </li> <li><a href="#cat2" data-transition="slide">Multiple Choice Games</a> </li> </ul> </div> <div data-role="footer" data-position="fixed"> <h4>&copy; 2014 Will Geller</h4> </div>
</div>
<!-- The True False Games -->
<div data-role="page" id="trueFalseGames" data-theme="f"> <div data-role="header"> <h1>True False Games</h1> <a href="#main" data-direction="reverse" data-transition="slide" class="ui-btn ui-icon-back ui-btn-icon-left ui-shadow ui-corner-all ui-btn-icon-notext ui-btn-inline">Back</a> </div> <div data-role="ui-content" style="margin-top:15px;"> <ul data-role="listview" data-inset="true"> <li><a onClick="launch(this.id)" id="histFacts1">US/World History Facts</a> </li> <li><a onClick="launch(this.id)" id="blinkFacts1">BlinkFeed Fun Facts</a> </li> </ul> </div> <div data-role="footer" data-position="fixed"> <h4><span style="float: left;">&copy; 2014 Will Geller</span> <span style="font-size:12px; float: right;">High Score: <span></span></span></h4> </div> <!-- The PopUp Card --> <div data-role="popup" id="card" data-dismissible="false" style="min-width:300px;" data-transition="flow" data-theme="f"> <div data-role="header"> <h1>Fact or Fiction</h1> </div> <div role="main" class="ui-content"> <div class="center"> <p></p> <a id="true" onclick="submit(this)" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">TRUE</a> <a id="false" onclick="submit(this)" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">FALSE</a> </div> </div> </div> <!-- The GameOver Card --> <div data-role="popup" id="gameover" data-dismissible="false" style="min-width:300px;" data-transition="flow" data-theme="d"> <div data-role="header"> <h1></h1> </div> <div role="main" class="ui-content"> <div class="center"> <p></p> <a id="true" onclick="retryQuiz()" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">RETRY</a> <a id="false" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-rel="back">CLOSE</a> </div> </div> </div>
</div>
<!-- The Multiple Choice Games -->
<div data-role="page" id="cat2" data-theme="g"> <div data-role="header"> <h1>Catergory Two</h1> <a href="#main" data-direction="reverse" data-transition="slide" class="ui-btn ui-icon-back ui-btn-icon-left ui-shadow ui-corner-all ui-btn-icon-notext ui-btn-inline">Back</a> </div> <div data-role="ui-content" style="margin-top:15px;"> <ul data-role="listview" data-inset="true"> <li><a href="#2pop1" data-rel="popup" data-transition="flow">PlaceHolder</a> </li> <li><a href="#2pop2" data-rel="popup" data-transition="flow">PlaceHolder</a> </li> </ul> </div> <div data-role="footer" data-position="fixed"> <h4>&copy; 2014 Will Geller</h4> </div> <!-- Simple PopUps --> <div data-role="popup" id="2pop1" class="ui-content">Answers lie in mysterious places</div> <div data-role="popup" id="2pop2" class="ui-content">Answers lie in mysterious places</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A JQuery Mobile Quiz Game - Script Codes CSS Codes

.center { margin: 0 auto !important; text-align: center !important;
}
.greenBtn { background-color: #0A8536 !important; border-color: #0A520D !important; color: #FAFAFA !important; text-shadow: 0 1px 0 #111 !important;
}
.redBtn { background-color: #800b25 !important; border-color: #b11a3c !important; color: #FAFAFA !important; text-shadow: 0 1px 0 #111 !important;
}

A JQuery Mobile Quiz Game - Script Codes JS Codes

var blinkFacts1 = [ ['Earth is closest to the Sun in January.', 'true'], ['Mark Twain invented and patented the bra-strap clasp.', 'true'], ['"Home Alone" was released closer to the moon landing than it was to today.', 'true'], ['Humans share 50% of there DNA with bananas', 'true'], ["Adults can't breathe and swallow at the same time", 'true'], ["Astronauts shrink while they're in space.", 'false'], ["Astronauts become two inches taller while in space.", 'true'], ["An octopus has two hearts.", 'false'], ["If you could fold a piece of paper 42 times, it would reach the moon.", "true"], ["Narwhals use their tusks to communicate with each other.", 'false'], ["Smoking can make your nipples fall off.", 'false'], ["Male otters produce venom.", 'false'], ["There are more stars in the universe than there are grains of sand on all the world's beaches.", 'true'],
]; var histFacts1 = [ ['Ben Franklin Discovered Electricity While He Was Flying a Kite.', 'false'], ['For Every American Killed in WWII about 20 Soveiets were Killed.', 'true'], ['By 1969 less than 5% of Americans heve tried Marijuana.', 'true'], ['The Egyption Pyramids were built by a workforces of 4500 Slaves.', 'false'], ['Thomas Crapper Invented the Flush Toilet.', 'false'], ['Van Gogh Cut Off His Ear in a Fit of Madness.', 'false'], ['Citizens found guilty at the Salem Trials were burned at the stake.', 'false'], ["In the 60's the young and well educated were more likely to support the war then their elders.", 'true'], ['Lincoln Fought the Civil War to End Slavery.', 'false'], ['Newton Discovered Gravity When an Apple Fell on His Head.', 'false']
];
var retryQuizName;
var quizData;
var score;
var highScore = 0;
var round;
var fact;
var truthful;
/*** LAUNCHES THE GAME WITH NEW QUIZ DATA ***/
function launch(quizName) { retryQuizName = quizName; quizData = eval(quizName); score = 0; round = 0; total = quizData.length*10; fact = quizData[round][0]; truthful = quizData[round][1] console.log(round); console.log(score); console.log(total); console.log(fact); console.log(truthful); $('#card div.ui-content a').removeClass('greenBtn'); $('#card div.ui-content a').removeClass('redBtn'); $('#card div.ui-content p').html(fact); $("#card").popup("open");
}
/*** SUBMITS A USER RESPONSE ***/
function submit(current) { //RIGHT if (current.id == truthful) { $(current).addClass('greenBtn'); $("#card").popup("close"); console.log("User clicked correctly"); round++; score+=10; if(score>highScore) { highScore=score; } nextQuestion(); updateHighScore(); } //WRONG else { $(current).addClass('redBtn'); $("#card").popup("close"); console.log("User clicked inccorect"); gameOver(); }
}
/*** OPENS THE NEXT QUESION ***/
function nextQuestion() { if (score!=total) { fact = quizData[round][0]; truthful = quizData[round][1] console.log(round); console.log(score); console.log(fact); console.log(truthful); setTimeout(function () { $('#card div.ui-content a').removeClass('greenBtn'); $('#card div.ui-content p').html(fact); $("#card").popup("open") }, 600); } else { win(); }
}
/*** Updates the HighScore ***/
function updateHighScore() { $('#trueFalseGames h4 span span').html(highScore);
}
/*** GAME OVER - LOSE ***/
function gameOver() { console.log('Game Over'); setTimeout(function () { $('#gameover h1').html("Game Over!"); $('#gameover div.ui-content p').html("The Game Is Over. <br/> You Scored " + score + " Out Of " + total + " Points!"); $("#gameover").popup("open"); }, 600);
}
/*** GAME OVER - WIN ***/
function win() { console.log('You Win'); setTimeout(function () { $('#gameover h1').html("You Win!"); $('#gameover div.ui-content p').html("Congratulations You Win! <br/> You Scored " + score + " Out Of " + total + " Points!"); $("#gameover").popup("open"); }, 600);
}
/*** RERUN SAME QUIZ DATA ***/
function retryQuiz() { $("#gameover").popup("close"); setTimeout(function () { launch(retryQuizName); }, 600);
}
A JQuery Mobile Quiz Game - Script Codes
A JQuery Mobile Quiz Game - Script Codes
Home Page Home
Developer Lisa Macken
Username lmack90
Uploaded October 01, 2022
Rating 3
Size 4,406 Kb
Views 109,296
Do you need developer help for A JQuery Mobile Quiz Game?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lisa Macken (lmack90) Script Codes
Name
CodeCamp - Front-End Challenge
JQuery Accordian Slider
Carousel
SmoothScroll Navigation 2
Animation examples
A Pen by Lisa Macken
Columns everywhere
Scrollable svg Animations
Image moves with mouse
Menu smoothscroll
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!