基于jQuery Mobile的测验应用

A Simple jQuery Mobile Quiz App

quiz

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1150
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

ion.sound({
    sounds: [{
        name: "branch_break",
        volume: 0.5,
        preload: true
    }, {
        name: "bell_ring",
        volume: 0.8,
        preload: true
    }, {
        name: "metal_plate_2",
        volume: 0.7,
        preload: true
    }, {
        name: "glass",
        volume: 1.0,
        preload: true
    }],
    volume: 1.0,
    path: "http://quiz.willgdev.com/sounds/",
    preload: true

});

$(document).ready(function() {

$("a").on("click", function() {
        ion.sound.play("branch_break");
        console.log("Play Sound");
    });

});

/*** ALL QUIZ DATA IS STORED IN MULTI-DIMENSIONAL ARRAYS BELOW***/

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 NameThatAnimal = [
    ['What animal is this?', 'Animal-Image-1', ['Capybara', 'Kouprey', 'Galago', 'Chamois'], 4],
    ['What kind of narrow footed marsupial is pictured here?', 'Animal-Image-2', ['Kangaroo Mouse', 'Dunnal', 'Doormouse', 'Dunnart'], 4],
    ['What animal is this?', 'Animal-Image-3', ['Bluebird', 'Mockingbird', 'Downy Woodpecker', 'Robin'], 2],
    ['What animal is this?', 'Animal-Image-4', ['Oncilla', 'Badger', 'Kinkajou', 'White-Nosed Coatl'], 4],
    ['Name this primate?', 'Animal-Image-5', ['Spider Monkey', 'Bonobo', 'Gorilla', 'Chimpanzee'], 2],
    ['What is this animal?', 'Animal-Image-6', ['Red-headed Woodpecker', 'Flamingo', 'Sarlet Ibis', 'Stork'], 3],
    ['What is this animal?', 'Animal-Image-7', ['Aardvark', 'Warthog', 'Armadillo', 'Gopher'], 1],
    ['What animal is this?', 'Animal-Image-8', ['Ferret', 'Skunk', 'Raccoon', 'Red Panda'], 3],
    ['Name this animal?', 'Animal-Image-9', ['Humpback Whale', 'Sperm Whale', 'Blue Whale', 'Right Whale'], 4],
    ['Name this animal?', 'Animal-Image-10', ['Bluebird', 'Oriole', 'Hummingbird', 'Cardinal'], 2],
    ['Name this species?', 'Animal-Image-11', ['Cashmere Goats', 'Angora Goats', 'Pashmina Goats', 'Turs'], 2],
    ['What animal is this?', 'Animal-Image-12', ['Robin', 'Sparrow', 'Sandpiper', 'Blue Jay'], 3],
    ['Lving primarily in Tibet, this is a...', 'Animal-Image-13', ['Water Buffalo', 'Capybara', 'Yak', 'Musk Ox'], 3],
    ['Identify this large marine mammal.', 'Animal-Image-14', ['Dugong', 'Angora Rabbit', 'Manatee', 'Komondor'], 1],
    ['Name this exotic bird?', 'Animal-Image-15', ['Hoatzin', 'Pigmy Cassowary', 'Crowned Cormorant', 'Golden Cockatoo'], 1],
    ['What animal is this?', 'Animal-Image-16', ['Mule', 'Dhole', 'Kudu', 'Ox'], 2],
    ['What is the largest songbird in North America?', 'Animal-Image-17', ['Common Raven', 'Cedar Waxwing', 'Indigo Bunting', 'Northern Oriole'], 1],
    ['What animal is this?', 'Animal-Image-18', ['Praying Mantis', 'Butterfly', 'House Centipede', 'Tarantula'], 1],
    ['Name this animal, a fad pet in the 1980s?', 'Animal-Image-19', ['Teacuo Pig', 'Guinea Pig', 'Visayan Warty Pig', 'Vietnamese Potbellied Pig'], 4],
    ['Name this primate species?', 'Animal-Image-20', ['Japanese Macaque', 'Rhesus Macaque', 'Bonobo', 'Owl-Faced Guenon'], 2],
    ['Name this animal?', 'Animal-Image-21', ['Bison', 'Moose', 'Reindeer', 'Deer'], 2],
    ['Name this animal?', 'Animal-Image-22', ['Clown Fish', 'Flounder', 'Jellyfish', 'Blue Surgeonfish'], 4],
    ['Name this animal?', 'Animal-Image-23', ['Pony', 'Mule', 'Horse', 'Cow'], 2],
    ['Name this animal?', 'Animal-Image-24', ['Cougar', 'Lion', 'Tiger', 'Lynx'], 1],
    ['Name this animal?', 'Animal-Image-25', ['Kiwi', 'Penguin', 'Quail', 'Puffin'], 4],
    ['Name this infamous bloodsucker?', 'Animal-Image-26', ['Hagfish', 'Lamprey', 'Vampire Eel', 'Leech'], 4],
    ['Name this breed of the pit viper that is semiaquatic?', 'Animal-Image-27', ['Gopher Snake', 'Indigo Snake', 'Hognose Snake', 'Cottonmouth'], 4],
    ['What species of animal is this?', 'Animal-Image-28', ['Rabbit', 'Rat', 'Squirrel', 'Mouse'], 3],
    ['What animal is this?', 'Animal-Image-29', ['Raccoon', 'Otter', 'Ferret', 'Rat'], 3],
    ['What animal is this?', 'Animal-Image-30', ['Antelope', 'Hippo', 'Horse', 'Arabian Camel'], 4],
    ['Identify this species, found across Europe, Africa and Asia?', 'Animal-Image-31', ['Black Bat', 'Brown Bat', 'Vampire Bat', 'Horseshoe Bat'], 4],
    ['Name this large, carnivorous turtle.', 'Animal-Image-32', ['Humutumu', 'Alligator Snapping Turtle', 'Common Snapping Turtle', 'Mata Mata'], 3],
    ['Identify this honey-loving animal.', 'Animal-Image-33', ['Sun Bear', 'Black Bear', 'Sloth Bear', 'Honey Badger'], 1],
    ['What animal is this', 'Animal-Image-34', ['Sheep', 'Mule', 'Cow', 'Alpaca'], 4],
    ['What kind of butterfly is this?', 'Animal-Image-35', ['Monarch Butterfly', 'Tiger Swallowtail', 'Morpho Butterfly', 'Eastern Yellow Butterfly'], 2],
    ['What is this particularly aggresive bear species?', 'Animal-Image-36', ['Sloth Bear', 'Spectacled Bear', 'Sun Bear', 'Asiatic Black Bear'], 3],
    ['What species of bird is this?', 'Animal-Image-37', ['Painted Sandgrouse', 'Common Crane', 'Black Vulture', 'Piping Plover'], 2],
    ['Name this spider, the largest tarantula species?', 'Animal-Image-38', ['Banana Spider', 'Goliath Birdeater', 'Giant Huntsman Spider', 'Mexican Giant Tarantula'], 2],
    ['What kind of animal is this?', 'Animal-Image-39', ['Ox', 'Moose', 'Deer', 'Gazelle'], 4],
    ['What kind of animal is this?', 'Animal-Image-40', ['Naked Mole Rat', 'Ferret', 'Raccoon', 'Shrew'], 4],
    ['Although this breed played a boarhound in the Harry Potter series, what is its real name?', 'Animal-Image-41', ['English Mastiff', 'Chinese Sharpie', 'Neapolitan Mastiff', 'Bloodhound'], 3],
    ['Name this cold-climate animal?', 'Animal-Image-42', ['Yak', 'Tundra Bison', 'Musk Ox', 'Arctic Buffalo'], 3],
    ['What animal is this?', 'Animal-Image-43', ['Red Fox', 'Coyote', 'Arctic Wolf', 'Polar Bear'], 3],
    ['This animal, nickmnamed "mouse deer" is actually a ', 'Animal-Image-44', ['Dik-Dik', 'Muntjac', 'Chevrotain', 'Pudu'], 3],
    ['What on earth do you call this creature?', 'Animal-Image-45', ['Crested Jellyfish', 'Purple Jellyfish', 'Portuguese Man o War', 'Fancy Rainbow Squid'], 3],
    ['Name this beautiful bird which shares part of its name with an Aztec god', 'Animal-Image-46', ['Green Parrot', 'Green Macaw', 'Quetzal', 'Red-Breasted Bunting'], 3],
    ['What subspecies of brown bear is this?', 'Animal-Image-47', ['Great Brown Bear', 'Grizzly Bear', 'BooBoo Bear', 'Teddy Bear'], 2],
    ['Identify this very large insect which is endemic to New Zealand', 'Animal-Image-48', ['Preying Mantis', 'Dragonfly', 'Cockroach', 'Giant Weta'], 4],
    ['What animal is this?', 'Animal-Image-49', ['Flounder', 'Flying Fish', 'Electric Eel', 'Swordfish'], 1],
    ['What kind of animal is this?', 'Animal-Image-50', ['Red-Capped Cardinal', 'Ivory-Billed Woodpecker', 'Pileated Woodpecker', 'Black-n-Red Broadbill'], 2],
    ['What kind of animal is this?', 'Animal-Image-51', ['Toucan', 'Cockatoo', 'Macaw', 'Loon'], 3],
    ['What is this very venemous sea snail?', 'Animal-Image-52', ['Cone Snail', 'Conch', 'West Pacific Snail', 'Whelk'], 1],
    ['What is this semiaquatic rodent called?', 'Animal-Image-53', ['Muskrat', 'River Otter', 'Mud Puppy', 'Dwarf Beaver'], 1],
    ['What animal is this?', 'Animal-Image-54', ['Starling', 'Robin', 'Redwing Blackbird', 'Swallow'], 1]
];

var Toys4Us = [
    ['Which superhero is this?', 'Toys-Image-01', ['Invisible Man', 'Thor', 'Flash Gordon', 'Herculer'], 2],
    ['What kind of toy is this?', 'Toys-Image-02', ['View-Master', 'Uno', 'Weebles', 'Xbox'], 4],
    ['Which character from the Muppets is this?', 'Toys-Image-03', ['Animal', 'Dr. Bunsen Honeydew', 'Waldorf', 'Miss Piggy'], 4],
    ['What classic toy is this?', 'Toys-Image-04', ['Rocking Horse', 'Pick-Up Sticks', 'Music Box', 'Kite'], 1],
    ['What type of sports equipment is this?', 'Toys-Image-05', ['Badminton Racquet', 'Tennis Ball', 'Goggles', 'Basketball Hoop'], 2],
    ['What kind of toy is this?', 'Toys-Image-06', ['Ice Skates', 'He-Man', 'Hungry Hungry Hippos', 'Hula Hoop'], 1],
    ['What classic toy is this?', 'Toys-Image-07', ['Rocking Horse', 'Harmonica', 'Skittles', 'Xylophone'], 4],
    ['From which Pixar film are these toys?', 'Toys-Image-08', ['Toy Story', 'Monsters, Inc.', 'Cars', 'WALL-E'], 4],
    ['What portable gaming handset is this?', 'Toys-Image-09', ['Nintendo GameBoy', 'Nintendo DS', 'Nintendo Wii', 'Walkie Talkie'], 2],
    ['What toy is shown in the picture?', 'Toys-Image-10', ['Dots', 'Bratz', 'Connect Four', 'Mastermind'], 3],
    ['What classic toy is this?', 'Toys-Image-11', ['Pogs', 'Dice', 'Tops', 'Cubes'], 2],
    ['What kind of toy is this?', 'Toys-Image-12', ['Rainbow Fighters', 'Rock Em Sock Em Robots', 'RoboSapien', '3D Fighters'], 2],
    ['What figurine toy is this?', 'Toys-Image-13', ['Transformers', 'Wacky Warts', 'Gnome Men', 'Troll Doll'], 4],
    ['What chess piece is this?', 'Toys-Image-14', ['King', 'Bishop', 'Rook', 'Pawn'], 2],
    ['Which Warner Brothers Character is this?', 'Toys-Image-15', ['Elmer Fudd', 'Marvin the Martian', 'Porky Pig', 'Roadrunner'], 2],
    ['What chess piece is this?', 'Toys-Image-16', ['Knight', 'Queeen', 'Bishop', 'King'], 1],
    ['What classic toy is this?', 'Toys-Image-17', ['Magic 8 Ball', 'Jack-In-The-Box', 'Jigsaw', 'Pick-Up Sticks'], 4],
    ['What kind of toy is this?', 'Toys-Image-18', ['Tonka Truck', 'Parcheesi', 'Kineticks', 'Trouble'], 1],
    ['Which Monster High doll is this is this?', 'Toys-Image-19', ['Draculaura', 'Vampiress', 'Dakrleslie', 'Sharkula'], 1],
    ['What kind of toy is this?', 'Toys-Image-20', ['Pinwhel', 'Operation', 'Pogs', 'Poker Chips'], 3],
    ['Which game console is this?', 'Toys-Image-21', ['NES Nintendo', 'Sega Mega Drive', 'Super Nintendo', 'PlayStation 2'], 4],
    ['What classic toy is this?', 'Toys-Image-22', ['Spinning Top', 'Hobby Horse', 'Marbles', 'Jack-In-The-Box'], 1],
    ['What classic toy is this?', 'Toys-Image-23', ['Music Box', 'Sled', 'Bernstain Bear', 'Beachball'], 4],
    ['What kind of toy is this?', 'Toys-Image-24', ['Space Wheel', 'Spinning Top', 'Manga', 'Yo-Yo'], 4],
    ['What superhero is this?', 'Toys-Image-25', ['Superman', 'Invisible Man', 'Capitain America', 'Silver Surfer'], 1],
    ['Which Toy Story figure is this?', 'Toys-Image-26', ['Monkey', 'Mr. Potato Head', 'Bo Peep', 'Buzz Lightyear'], 2],
    ['What kind of toy is this?', 'Toys-Image-27', ['Mighty Max', 'Monopoly', 'Moon Shoes', 'Mighty Morphin Power Boots'], 3],
    ['What Star Wars figure is this?', 'Toys-Image-28', ['Luke Skywalker', 'Princess Leia', 'Stormtrooper', 'R2-D2'], 2],
    ['What toy is this?', 'Toys-Image-29', ['Lincoln Logs', 'Alphabet Blocks', 'Mega Blocks', 'Lego'], 2],
    ['What board game is this?', 'Toys-Image-30', ['Clue', 'Chinese Checkers', 'The Game of Life', 'Scrabble'], 3],
    ['What kind of toy is this?', 'Toys-Image-31', ['Crystal Radio Kit', 'LightSaber', 'Digital Thermometer', 'Tazer'], 1],
    ['What classic toy is this?', 'Toys-Image-32', ['Easel', 'Jet', 'Kite', 'Plane'], 3],
    ['What classic toy is this?', 'Toys-Image-33', ['Paintbrush', 'Jacobs Ladder', 'Raggedy Ann Doll', 'Kewpie Doll'], 4],
    ['Which Star Wars figure is this?', 'Toys-Image-34', ['Darth Vader', 'C3PO', 'Yoda', 'Stormtrooper'], 4],
    ['Which famous toy couple is this?', 'Toys-Image-35', ['Lucy and Tom', 'Barbie and Ken', 'Stacey and Rick', 'Katie and Ben'], 2],
    ['Which popular toy is known as a "Schtroumpf" in French?', 'Toys-Image-36', ['Beanie Baby', 'Sylvanian Family', 'Smurf', 'Care Bear'], 3],
    ['What Disney toy is this?', 'Toys-Image-37', ['Tigger', 'Nemo', 'Hobbes', 'Bambi'], 1],
    ['What classic toy is this?', 'Toys-Image-38', ['Rubiks Cube', 'Kaleidoscope', 'Easel', 'Skittles'], 1],
    ['What kind of toy is this?', 'Toys-Image-39', ['Paintbrush', 'Kite', 'Rope', 'Stamps'], 1],
    ['What is pictured here?', 'Toys-Image-40', ['Slingshots', 'Water Guns', 'Hacky Sacks', 'Water Balloons'], 4],
    ['Which Smurf figure is this?', 'Toys-Image-41', ['Azrael', 'Gargamel', 'Smurfette', 'Papa Smurf'], 4],
    ['What classic toy is this?', 'Toys-Image-42', ['Sled', 'Skittles', 'Whistle', 'Easel'], 1],
    ['What kind of toy is this?', 'Toys-Image-43', ['Toy Soldier', 'Playmobil', 'G.I. Joe', 'Action Man'], 1],
    ['Which Sesame Street character is this?', 'Toys-Image-44', ['Elmo', 'Oscar', 'Big Bird', 'Ernie'], 3]
];

var retryQuizName;
var quizDataFull = [];
var quizData = [];
var quizType;
var quizFullCount;

var score;
var round;

var fact;
var truthful;
var highScoreTF = 0;

var pic;
var answerA;
var answerB;
var answerC;
var answerD;
var correctChoice;
var highScoreMC = 0;

/*** LAUNCHES THE GAME WITH NEW QUIZ DATA ***/
function launch(quizName) {
    retryQuizName = quizName;
    quizDataFull = eval(quizName);
    quizData = [];
    score = 0;
    round = 0;

quizFullCount = quizDataFull.length;
    console.log(quizDataFull);
    console.log(quizFullCount);

// Shuffle the Quiz Deck
    while (quizData.length < 10) {
        var quizDataAdd = quizDataFull[Math.floor(Math.random() * quizFullCount)];
        console.log(quizDataAdd);

if ((quizData.indexOf(quizDataAdd)) == '-1') {
            quizData.push(quizDataAdd);
        }
    }
    console.log(quizData);

totalPts = quizData.length * 10;

if (quizDataFull[0].length == 2) {
        quizType = 'TF';
    } else if (quizDataFull[0].length == 4) {
        quizType = 'MC';
    }

/*** LOAD TF DATA ***/
    if (quizType == 'TF') {

fact = quizData[round][0];
        truthful = quizData[round][1];

console.log(round);
        console.log(score);
        console.log(totalPts);
        console.log(fact);
        console.log(truthful);

$('#tfCARD div.ui-content a').removeClass('greenBtn');
        $('#tfCARD div.ui-content a').removeClass('redBtn');
        $('#tfCARD div.ui-content p').html(fact);
        $('#tfCARD').popup("open");
    }

/*** LOAD MC DATA ***/
    else if (quizType == 'MC') {

for (var i = 0; i < quizData.length; i++) {
            var IMG = new Image;
            picTemp = quizData[i][1];
            IMG.src = "http://quiz.willgdev.com/Quiz-Images/" + picTemp + ".jpg";
            console.log("Image " + IMG.src + " Laoded")
        }

// Load the First Question Data
        hint = quizData[round][0];
        pic = quizData[round][1];
        answerA = quizData[round][2][0];
        answerB = quizData[round][2][1];
        answerC = quizData[round][2][2];
        answerD = quizData[round][2][3];
        correctChoice = quizData[round][3];

pic = "http://quiz.willgdev.com/Quiz-Images/" + pic + ".jpg";

console.log(round);
        console.log(score);
        console.log(totalPts);
        console.log(quizData[round][2]);
        console.log(hint);
        console.log(pic);
        console.log(correctChoice);

// Shuffle the Answers
        var $MCA = $('#mcCARD #mcAnswers');
        $('div', $MCA).sort(function() {
            return (Math.round(Math.random()) - 0.5)
        }).appendTo($MCA);

// Grid the Answer Buttons
        $('#mcCARD #mcAnswers div').removeClass();
        $('#mcCARD #mcAnswers div:even').addClass('ui-block-a');
        $('#mcCARD #mcAnswers div:odd').addClass('ui-block-b');

// Update the Popup
        $('#mcCARD div.ui-content a').removeClass('greenBtn');
        $('#mcCARD div.ui-content a').removeClass('redBtn');
        $('#mcCARD h1').html(quizName);
        $('#mcCARD div.ui-content p').html(hint);
        $('#mcCARD div.ui-content img').attr('src', pic);
        $('#mcCARD div.ui-content a#1').html(answerA);
        $('#mcCARD div.ui-content a#2').html(answerB);
        $('#mcCARD div.ui-content a#3').html(answerC);
        $('#mcCARD div.ui-content a#4').html(answerD);

setTimeout(function() {
            $('#mcCARD').popup("open");
        }, 350);
    }
}

/*** SUBMITS A True/False RESPONSE ***/
function submitTF(current) {
    //RIGHT
    if (current.id == truthful) {
        ion.sound.play("glass");
        $(current).addClass('greenBtn');
        $("#tfCARD").popup("close");
        console.log("User clicked correctly");
        round++;
        score += 10;
        if (score > highScoreTF) {
            highScoreTF = score;
        }
        nextQuestionTF();
        updateHighScoreTF();
    }
    //WRONG
    else {
        ion.sound.play("metal_plate_2");
        $(current).addClass('redBtn');
        $("#tfCARD").popup("close");
        console.log("User clicked inccorect");
        gameOverTF();
    }
}

/****************THE TRUE FALSE FUNCTIONS*****************/

/*** OPENS THE NEXT True/False QUESION ***/
function nextQuestionTF() {
    if (score != totalPts) {
        fact = quizData[round][0];
        truthful = quizData[round][1]

console.log(round);
        console.log(score);
        console.log(fact);
        console.log(truthful);

setTimeout(function() {
            $('#tfCARD div.ui-content a').removeClass('greenBtn');
            $('#tfCARD div.ui-content p').html(fact);
            $("#tfCARD").popup("open")
        }, 600);
    } else {
        winTF();
    }
}

/*** True/False Updates the HighScore ***/
function updateHighScoreTF() {
    $('#trueFalseGames h4 span span').html(highScoreTF);
}

/*** True/False GAME OVER - LOSE ***/
function gameOverTF() {
    setTimeout(function() {
        $('#gameoverTF h1').html("Game Over!");
        $('#gameoverTF div.ui-content p').html("The Game Is Over. <br/> You Scored " + score + " Out Of " + totalPts + " Points!");
        $("#gameoverTF").popup("open");
    }, 600);
}

/*** True/False GAME OVER - WIN ***/
function winTF() {
    console.log('You Win');
    ion.sound.play("bell_ring");

setTimeout(function() {
        $('#gameoverTF h1').html("You Win!");
        $('#gameoverTF div.ui-content p').html("Congratulations You Win! <br/> You Scored " + score + " Out Of " + totalPts + " Points!");
        $("#gameoverTF").popup("open");
    }, 600);
}

/*** True/False RERUN SAME QUIZ DATA ***/
function retryQuizTF() {
    $("#gameoverTF").popup("close");
    setTimeout(function() {
        launch(retryQuizName);
    }, 600);
}

/****************THE MULTIPLE CHOICE FUNCTIONS*****************/

/*** SUBMITS A Multiple Choice RESPONSE ***/
function submitMC(current) {
    //RIGHT
    if (current.id == correctChoice) {
        ion.sound.play("glass");
        $(current).addClass('greenBtn');
        $("#mcCARD").popup("close");
        console.log("User clicked correctly");
        round++;
        score += 10;
        if (score > highScoreMC) {
            highScoreMC = score;
        }
        nextQuestionMC();
        updateHighScoreMC();
    }
    //WRONG
    else {
        ion.sound.play("metal_plate_2");
        $(current).addClass('redBtn');
        $("#mcCARD").popup("close");
        console.log("User clicked inccorect");
        gameOverMC();
    }
}

/*** OPENS THE NEXT Multiple Choice QUESION ***/
function nextQuestionMC() {
    if (score != totalPts) {
        // Load the next question's Data
        hint = quizData[round][0];
        pic = quizData[round][1];
        answerA = quizData[round][2][0];
        answerB = quizData[round][2][1];
        answerC = quizData[round][2][2];
        answerD = quizData[round][2][3];
        correctChoice = quizData[round][3];

pic = "http://quiz.willgdev.com/Quiz-Images/" + pic + ".jpg";

setTimeout(function() {
            // Shuffle the Answers
            var $MCA = $('#mcCARD #mcAnswers');
            $('div', $MCA).sort(function() {
                return (Math.round(Math.random()) - 0.5)
            }).appendTo($MCA);

// Format the answers
            $('#mcCARD #mcAnswers div').removeClass();
            $('#mcCARD #mcAnswers div:even').addClass('ui-block-a');
            $('#mcCARD #mcAnswers div:odd').addClass('ui-block-b');
            $('#mcCARD div.ui-content a').removeClass('greenBtn');

// Update the Popup
            $('#mcCARD div.ui-content p').html(hint);
            $('#mcCARD div.ui-content img').attr('src', pic);
            $('#mcCARD div.ui-content a#1').html(answerA);
            $('#mcCARD div.ui-content a#2').html(answerB);
            $('#mcCARD div.ui-content a#3').html(answerC);
            $('#mcCARD div.ui-content a#4').html(answerD);
        }, 450);

setTimeout(function() {
            $('#mcCARD').popup("open");
        }, 500);
    } else {
        winMC();
    }
}

/*** Multiple Choice Updates the HighScore ***/
function updateHighScoreMC() {
    $('#mcGames h4 span span').html(highScoreMC);
}

/*** Multiple Choice GAME OVER - LOSE ***/
function gameOverMC() {
    console.log('Game Over');
    setTimeout(function() {
        $('#gameoverMC h1').html("Game Over!");
        $('#gameoverMC div.ui-content p').html("The Game Is Over. <br/> You Scored " + score + " Out Of " + totalPts + " Points!");
        $("#gameoverMC").popup("open");
    }, 600);
}

/*** Multiple Choice GAME OVER - WIN ***/
function winMC() {
    ion.sound.play("bell_ring");
    console.log('You Win');

setTimeout(function() {
        $('#gameoverMC h1').html("You Win!");
        $('#gameoverMC div.ui-content p').html("Congratulations You Win! <br/> You Scored " + score + " Out Of " + totalPts + " Points!");
        $("#gameoverMC").popup("open");
    }, 600);
}

/*** Multiple Choice RERUN SAME QUIZ DATA ***/
function retryQuizMC() {
    $("#gameoverMC").popup("close");
    setTimeout(function() {
        launch(retryQuizName);
    }, 600);
}

编译

CSS

HTML

<div data-role="page" id="main" data-theme="b">
    <div data-role="header">
        <h1>Will G Quiz App</h1>
    </div>
    <div data-role="ui-content" style="margin-top:15px;">
        <ul data-role="listview" data-inset="true">
            <li><a href="#mcGames" data-transition="slide">Multiple Choice Games</a> </li>
            <li><a href="#trueFalseGames" data-transition="slide">True False Games</a> </li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed">
        <h4>&copy; 2014 Will Geller</h4>
    </div>
</div>

<div data-role="page" id="trueFalseGames" data-theme="e">
    <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>0</span></span></h4>
    </div>

<div data-role="popup" id="tfCARD" data-dismissible="false" style="min-width:200px;" data-transition="turn">
        <div data-role="header"> <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
            <h1>Fact or Fiction</h1>
        </div>
        <div role="main" class="ui-content">
            <div class="center">
                <p></p>
                <a id="true" onclick="submitTF(this)" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">TRUE</a> <a id="false" onclick="submitTF(this)" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">FALSE</a> </div>
        </div>
    </div>

<div data-role="popup" id="gameoverTF" 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="retryQuizTF()" 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>

<div data-role="page" id="mcGames" data-theme="g">
    <div data-role="header">
        <h1>My Choice 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 id="NameThatAnimal" onclick="launch(this.id)">NameThatAnimal</a> </li>
            <li><a id="Toys4Us" onclick="launch(this.id)">Toys4Us</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>0</span></span></h4>
    </div>

<div data-role="popup" id="mcCARD" data-overlay-theme="b" data-dismissible="false" style="min-width:280px;" data-transition="turn">
        <div data-role="header"> <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
            <h1>Choose at Own Risk</h1>
        </div>
        <div role="main" class="ui-content">
            <p class="center"></p>
            <br/>
            <div class="center"> <img width="232" height="165" style="border: 2px solid #5E7975; border-radius: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px;" /> </div>
            <div class="ui-grid-a ui-mini" id="mcAnswers">
                <div><a id="1" onclick="submitMC(this)" class="ui-btn ui-corner-all ui-shadow">A</a>
                </div>
                <div><a id="2" onclick="submitMC(this)" class="ui-btn ui-corner-all ui-shadow">B</a>
                </div>
                <div><a id="3" onclick="submitMC(this)" class="ui-btn ui-corner-all ui-shadow">C</a>
                </div>
                <div><a id="4" onclick="submitMC(this)" class="ui-btn ui-corner-all ui-shadow">D</a>
                </div>
            </div>
        </div>
    </div>

<div data-role="popup" id="gameoverMC" data-dismissible="false" style="min-width:300px;" data-transition="flow" data-theme="a">
        <div data-role="header">
            <h1></h1>
        </div>
        <div role="main" class="ui-content">
            <div class="center">
                <p></p>
                <a id="true" onclick="retryQuizMC()" 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>
<script src='/libs/jquery/jquery.mobile-1.4.5.min.js'></script>
<script src='/uploads/141102/ion.sound.min.js'></script>

A Simple jQuery Mobile Quiz App

quiz

编辑器支持Emmet

快捷键

A Simple jQuery Mobile Quiz App

quiz

很棒！电子游戏知识小问答（测试）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：