HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<body>
<div class="wrapper" id="main">
<div class="title align-text">
<h1>Trivia Questions</h1>
<h3>Categories:</h3>
</div>
<div class="container" id="column1">
<div class="row">
<div class="col-md-3">
<button class="cat btn" id="listAnimals"><i class="fa fa-paw"></i><br>Animals</button>
</div>
<div class="col-md-3">
<button class="cat btn" id="listArt"><i class="fa fa-paint-brush"></i><br>Art</button>
</div>
<div class="col-md-3">
<button class="cat btn" id="listBiology"><i class="fa fa-tree"></i><br>Biology</button>
</div>
<div class="col-md-3">
<button class="cat btn" id="listSports"><i class="fa fa-futbol-o"></i><br>Sports</button>
</div>
</div>
</div>
<div class="container" id="column2">
<div class="row">
<div class="col-md-3">
<button class="cat btn" id="listChemistry"><i class="fa fa-flask"></i><br>Chemistry</button>
</div>
<div class="col-md-3">
<button class="cat btn" id="listComputers"><i class="fa fa-desktop"></i><br>Computers</button>
</div>
<div class="col-md-3">
<button class="cat btn" id="listFood"><i class="fa fa-cutlery"></i><br>Food</button>
</div>
<div class="col-md-3">
<button class="cat btn" id="listLiterature"><i class="fa fa-book"></i><br>Literature</button>
</div>
</div>
</div>
<div class="container" id="column3">
<div class="row">
<div class="col-md-3">
<button class="cat btn" id="listMusic"><i class="fa fa-music"></i><br>Music</button>
</div>
<div class="col-md-3">
<button class="cat btn" id="listGermany"><i class="fa fa-flag"></i><br>Germany</button>
</div>
<div class="col-md-3">
<button class="cat btn" id="listMovies"><i class="fa fa-film"></i><br>Movies</button>
</div>
</div>
</div>
</div>
<!-- Quiz questions -->
<div class="wrapper" id="quiz_area">
<div class="q-wrapper">
<h3 class="question" id="num"></h3>
<p class="question" id="question"></p>
</div>
<div id="choices">
<button class="btn answer" name="choice" id="choice0" value="0"></button>
<button class="btn answer" name="choice" id="choice1" value="1"></button>
<button class="btn answer" name="choice" id="choice2" value="2"></button>
<button class="btn answer" name="choice" id="choice3" value="3"></button>
</div>
<nav id="navButtons">
<ul class="pagination" id="pageItems">
<li class="page-item" id="pageBack"><a class="page-link" href="#">Back</a>
</li>
<li class="page-item" id="pageNext"><a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
<div class="wrapper" id="results">
<h3 id="message"></h3>
<button class="btn" id="reset">Play Again</button>
</div>
</body>
@import url('https://fonts.googleapis.com/css?family=Lobster|Open+Sans');
body {
background-color: #B10DC9;
font-family: 'Open Sans', sans-serif;
}
.container {
width: 750px;
}
.title {
display: block;
text-align: center;
}
.title h1 {
font-family: 'Lobster', cursive;
font-size: 55px;
color: #DDDDDD;
}
.title h3 {
color: #DDDDDD;
font-family: 'Open Sans', sans-serif;
}
.btn > i {
font-size: 40px;
}
.btn {
background-color: #ffffff;
border: 3px solid #DDDDDD;
width: 150px;
height: 150px;
display: block;
margin: 5px;
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 25px;
}
.btn:hover {
background-color: #DDDDDD;
}
/*----Quiz Questions----*/
#quiz_area {
visibility: hidden;
width: 650px;
height: 450px;
position: absolute;
margin: auto;
top: 15%;
left: 20%;
}
.q-wrapper {
background-color: #FFFFFF;
border-radius: 3px;
border: 3px solid #B10DC9;
width: 350px;
position: relative;
left: 30%;
text-align: center;
}
input {
cursor: pointer;
}
.question {
display: inline-block;
}
#num {
padding: 5px;
font-size: 45px;
font-family: 'Lobster', cursive;
}
#question {
margin: 10px;
text-align: center;
font-size: 20px;
}
#choices {
margin: 5px;
padding-left: 185px;
font-size: 18px;
}
.answer {
height: 50px;
width: 350px;
border-radius: 3px;
border: 3px solid #B10DC9;
}
.answer:active, .answer.active {
background-color: #DDDDDD;
}
.control {
height: 45px;
width: 100px;
position: relative;
top: 40%;
left: 40%;
background-color: #DDDDDD;
margin: 5px;
border: none;
display: inline-block;
}
#results {
font-family: 'Open Sans', sans-serif;
visibility: hidden;
text-align: center;
background-color: #FFFFFF;
border-radius: 3px;
width: 550px;
height: 250px;
position: absolute;
top: 25%;
left: 30%;
}
#message {
position: relative;
top: 10%;
text-align: center;
vertical-align: middle;
font-family: 'Lobster', cursive;
font-size: 40px;
font-weight: bold;
}
#reset {
border-radius: 3px;
background-color: #B10DC9;
position: relative;
top: 15%;
left: 35%;
}
var listAnimals = [{
question: "What are baby beavers called?",
choices: ["Puppies", "Calfs", "Kittens", "Lambs"],
answer: 2
},
{
question: "What is the fastest land snake in the world?",
choices: ["Black Mamba", "Python", "Rattle Snake", "Boa Constrictor"],
answer: 0
},
{
question: "Which animal is incorrectly rumored to bury its head in the sand when frightened?",
choices: ["Rabbit", "Ostrich", "Mole", "Flamingo"],
answer: 1
},
{
question: "What is the smallest and most endangered species of sloth?",
choices: ["Bradypus pygmaeus", "Bradypus torquatus", "Bradypus tridactylus", "Bradypus variegatus"],
answer: 0
},
{
question: "What famous horse was the longest to hold the triple crown?",
choices: ["Sea Biscuit", "Black Beauty", "Flicka", "Secretariat"],
answer: 3
},
{
question: "What is a group of owls called?",
choices: ["Murder", "Parliament", "Herd", "Congregation"],
answer: 1
},
{
question: "A puggle is a cross between which two dog breeds?",
choices: ["Pug and Beagle", "Pug and Laborador Retriever", "Boxer and Husky", "Chihuahua and Beagle"],
answer: 0
},
{
question: "Which mammal has the longest gestation period?",
choices: ["Whale", "Dog", "Human", "Elephant"],
answer: 3
},
{
question: "The Arabian camel, also called dromedary, has how many humps?",
choices: ["0", "1", "2", "3"],
answer: 1
},
{
question: "The duck billed platypus is native to what country?",
choices: ["Canada", "USA", "Australia", "England"],
answer: 2
}];
var listArt = [{
question: "Which artist is credited with developing linear perspective?",
choices: ["Brunelleschi", "Warhol", "Picasso", "Dali"],
answer: 0
},
{
question: "Which French sculptor created the Statue of Liberty?",
choices: ["Edgar Degas", "Camille Pissarro", "Henri Fantin-Latour", "Frédéric Auguste Bartholdi"],
answer: 3
},
{
question: "Which artist created the sculpture, 'The Thinker'?",
choices: ["Edgar Degas", "Auguste Rodin", "Henri Fantin-Latour", "Camille Pissarro"],
answer: 1
},
{
question: "Who painted the famous Dutch Golden age painting 'The Night Watch'?",
choices: ["van Gogh", "Rembrandt", "Hals", "Steen"],
answer: 1
},
{
question: "What color do you get when you mix yellow and blue?",
choices: ["Teal", "Purple", "Green", "Red"],
answer: 2
},
{
question: "Who was the Spanish surrealist painter best known for his work 'The Persistence of Memory'?",
choices: ["Pablo Picasso", "Francisco Goya", "El Greco", "Salvador Dalí"],
answer: 3
},
{
question: "The art of paper folding is known as what?",
choices: ["Sculpture", "Origami", "Macramé", "Collage"],
answer: 1
},
{
question: "How many paintings did Vincent van Gogh sell during his lifetime?",
choices: ["0", "1", "2", "3"],
answer: 1
},
{
question: "Which painter is considered to have started the impressionist movement?",
choices: ["Claude Monet", "Pierre-Auguste Renoir", "Edgar Degas", "Paul Cézanne"],
answer: 0
},
{
question: "Which painter is famous for cutting off part of his ear?",
choices: ["Pablo Picasso", "Claude Monet", "Vincent van Gogh", "Michelangelo"],
answer: 2
}];
var listBiology = [
{
question: "What is the largest organ of the human body?",
choices: ["Brain", "Skeleton", "Heart", "Skin"],
answer: 3
},
{
question: "What is the term for cell death?",
choices: ["Apoptosis", "Mitosis", "Osmosis", "Diffusion"],
answer: 0
},
{
question: "What does the acronym DNA stand for?",
choices: ["Dinitrogen Acetate", "Determined Not Active", "Deoxyribonucleic acid", "Denucleated actins"],
answer: 2
},
{
question: "Name the process used by plants to convert light energy into chemical energy.",
choices: ["Photosynthesis", "Mitosis", "Absorption", "Diffusion"],
answer: 0
},
{
question: "What is a fertilized egg called?",
choices: ["Larva", "Zygote", "Embryo", "Fetus"],
answer: 1
},
{
question: "Which hormone is associated with the fight-or-flight response?",
choices: ["Dopamine", "Testosterone", "Thyroid Stimulating Hormone", "Norepinephrine"],
answer: 3
},
{
question: "Name the eukaryotic cell organelle that contains the majority of the cell's genetic material.",
choices: ["Mitochondria", "Nucleus", "Riboflavin", "Golgi body"],
answer: 1
},
{
question: "What is the longest bone in the human body?",
choices: ["Femur", "Tibia", "Fibia", "Humerus"],
answer: 0
},
{
question: "Which molecule is used to store energy for cells?",
choices: ["DNA", "ATP", "RNA", "cAMP"],
answer: 1
},
{
question: "How many chromosomes does a person have?",
choices: ["23", "46", "92", "138"],
answer: 1
}];
var listChemistry = [
{
question: "What is the chemical symbol for Gold?",
choices: ["Pb", "Ni", "Au", "Ge"],
answer: 2
},
{
question: "Acids release which ion?",
choices: ["OH-", "H+", "H-", "O-"],
answer: 1
},
{
question: "What is a positively charged ion?",
choices: ["Anion", "Ion", "Electron", "Cation"],
answer: 3
},
{
question: "What is the most abundant element in the earth's atmosphere?",
choices: ["Carbon", "Oxygen", "Nitrogen", "Hydrogen"],
answer: 2
},
{
question: "What is the mass of water?",
choices: ["18 grams", "33 grams", "3 grams", "28 grams"],
answer: 0
},
{
question: "What is the first element listed on the Periodic Table?",
choices: ["Helium", "Carbon", "Hydrogen", "Nitrogen"],
answer: 2
},
{
question: "A covalent bond is the linkage of two atoms by the sharing of what?",
choices: ["2 ions", "2 electrons", "3 elements", "1 reaction"],
answer: 1
},
{
question: "What is released in an endothermic reaction?",
choices: ["Hydrogen", "Oxygen", "Heat", "Water"],
answer: 2
},
{
question: "Avogadro's constant represents the number of particles of a substance for which unit of measurement?",
choices: ["Mass", "Mole", "Molecule", "Micrometer"],
answer: 1
},
{
question: "What is the most abundant metal in the earth's crust?",
choices: ["Calcium", "Sodium", "Aluminum", "Iron"],
answer: 2
}];
var listComputers = [
{
question: "What year was Facebook founded?",
choices: ["2001", "2002", "2003", "2004"],
answer: 3
},
{
question: "What does GUI stand for?",
choices: ["Graphical User Interface", "Golfing Union of Ireland", "Global Unique Identifier", "Graphics Unit Interface"],
answer: 0
},
{
question: "The companies HP, Microsoft, and Apple were all started in a what?",
choices: ["Bedroom", "Kitchen", "Garage", "Office"],
answer: 2
},
{
question: "What is the most used password?",
choices: ["password", "123456", "111111", "admin"],
answer: 1
},
{
question: "The term 'debugging' was established by Rear Admiral Grace Hopper after removing what from a computer?",
choices: ["a rat", "a beetle", "a moth", "a spider web"],
answer: 2
},
{
question: "What was the first registered domain name?",
choices: ["computers.com", "apple.com", "ibm.com", "symbolics.com"],
answer: 3
},
{
question: "What was the first computer mouse made from?",
choices: ["Wood", "Plastic", "Metal", "Glass"],
answer: 0
},
{
question: "This person is often called the inventor of the modern computer, and created the first fully electronic computer.",
choices: ["William Gates", "Steve Wozniak", "Konrad Zuse", "Steve Jobs"],
answer: 2
},
{
question: "Who is credited for developing what is known as the first computer program?",
choices: ["Charles Babbage", "Ada Lovelace", "Konrad Zuse", "Bill Gates"],
answer: 1
},
{
question: "What does CPU stand for?",
choices: ["Computer Processing Unit", "Central Peripheral Unit", "Central Processing Unit", "Computer Processing User"],
answer: 2
}];
var listFood = [
{
question: "What food is hummus made from?",
choices: ["Tofu", "Chick peas", "Rice", "Corn"],
answer: 1
},
{
question: "What is the most popular spice in the world?",
choices: ["Pepper", "Nutmeg", "Curry", "Cumin"],
answer: 3
},
{
question: "A pound of honey is the result of honey bees visiting how many flowers?",
choices: ["10,000", "1,000,000", "2,000,000", "10,000,000"],
answer: 2
},
{
question: "Americans spend approximately how much money on beer on an annual basis?",
choices: ["1 billion", "5 billion", "20 billion", "25 billion"],
answer: 3
},
{
question: "What organs does Haggis, the nation dish of Scotland, NOT contain?",
choices: ["Heart", "Liver", "Lungs", "Brain"],
answer: 3
},
{
question: "Where was the ice cream sundae invented?",
choices: ["England", "USA", "Germany", "Australia"],
answer: 1
},
{
question: "When was sliced bread first available for sale?",
choices: ["1952", "1916", "1930", "1947"],
answer: 2
},
{
question: "What is used to enhance the color of red meat?",
choices: ["Red dyes", "Carbon monoxide", "Preservatives", "Formaldehyde"],
answer: 1
},
{
question: "What is the most commonly eaten fish in the world?",
choices: ["Tilapia", "Salmon", "Tuna", "Herring"],
answer: 3
},
{
question: "What is the sense of taste that allows us to detect savory foods?",
choices: ["Salt", "Savory", "Umami", "Bitter"],
answer: 2
}];
var listGermany = [
{
question: "Germans are the 2nd largest beer drinkers, following which country?",
choices: ["England", "Austria", "Czech Republic", "France"],
answer: 2
},
{
question: "What is the name of the space city located in Germany?",
choices: ["Kiel", "Baden Baden", "Cologne", "Strasbourg"],
answer: 1
},
{
question: "What is the most popular surname in Germany?",
choices: ["Müller", "Schmidt", "Schneider", "Fischer"],
answer: 0
},
{
question: "During which month does Oktoberfest take place?",
choices: ["October", "November", "August", "September"],
answer: 3
},
{
question: "Which German city boasts the largest train station in Europe?",
choices: ["Munich", "Düsseldorf", "Berlin", "Cologne"],
answer: 2
},
{
question: "Which candy was invented by a German?",
choices: ["Chocolate", "Gummy bears", "Toffee", "Caramel"],
answer: 1
},
{
question: "Germany was the first country in the world to adopt which time changing tradition?",
choices: ["Time zones", "Daylight Saving Time", "Standard Time", "Winter Time"],
answer: 1
},
{
question: "The autobahn is famous for being free of speed limits in some locations. However, it is illegal and subject to penalty when drivers run out of this.",
choices: ["Gas", "Motor oil", "Garbage bags", "Beer"],
answer: 0
},
{
question: "How many different cities have served as Germany's capital?",
choices: ["5", "6", "7", "8"],
answer: 2
},
{
question: "What animal has been selected as Germany's national emblem?",
choices: ["Bear", "Eagle", "Wolf", "Ram"],
answer: 1
}];
var listLiterature = [
{
question: "Who wrote the 1956 screenplay for Moby Dick?",
choices: ["Ray Bradbury", "Herman Melville", "Ernest Hemingway", "F. Scott Fitzgerald"],
answer: 0
},
{
question: "What is the best-selling novel of all time?",
choices: ["A Tale of Two Cities", "The Lord of the Rings", "The Little Prince", "Don Quixote"],
answer: 3
},
{
question: "Who declined the 1964 Nobel Prize for literature?",
choices: ["Ernest Hemingway", "Jean-Paul Sartre", "Ray Bradbury", "C.S. Lewis"],
answer: 1
},
{
question: "What is the name of Washington Irving's 1819 short story about a man who fell asleep in the woods for 20 years?",
choices: ["The Legend of Sleepy Hollow", "Rip Van Winkle", "Tales of the Alhambra", "The Sketch Book"],
answer: 1
},
{
question: "Which literary magazine deeply influenced the Harlem Renaissance despite collapsing after only one issue?",
choices: ["Kenyon Review", "Harper's Magazine", "Fire!!", "The Crisis"],
answer: 2
},
{
question: "Who wrote the novel The Color Purple?",
choices: ["Alice Walker", "Zora Neale Hurston", "Toni Morrison", "Maya Angelou"],
answer: 0
},
{
question: "In the novel, The Great Gatsby, Jay Gatsby often stares at what, located at the end of Daisy's dock?",
choices: ["A boat", "A green light", "A white light", "A post"],
answer: 1
},
{
question: "The novel Heart of Darkness was written by which Polish-British author?",
choices: ["Henry David Thoreau", "F. Scott Fitzgerald", "Ernest Hemingway", "Joseph Conrad"],
answer: 3
},
{
question: "The book Walden, written by Henry David Thoreau, describes which philosophy followed by the author?",
choices: ["Existentialism", "Perennialism", "Reconstructionism", "Progressivism"],
answer: 0
},
{
question: "In the novel The Bluest Eye, Pecola Breedlove idolizes which famous American child actress?",
choices: ["Dakota Fanning", "Shirley Temple", "Drew Barrymore", "Judy Garland"],
answer: 1
}];
var listMovies = [
{
question: "Which Alfred Hichcock film was the first to show a toilet flush?",
choices: ["Psycho", "The Birds", "Rear Window", "Vertigo"],
answer: 0
},
{
question: "Which discontinued product did Swingling have to bring back following the release of the movie Office Space?",
choices: ["Blue hole punch", "Green binder", "Red stapler", "Yellow mug"],
answer: 2
},
{
question: "How many times does The Dude say the word 'man' in The Big Lebowski?",
choices: ["103", "147", "167", "215"],
answer: 2
},
{
question: "Who was Tim Burton's second choice for the role of Willy Wonka in Charlie and the Chocolate Factory?" ,
choices: ["Michael Keaton", "Jack Nicholson", "Alan Rickman", "Dwayne 'The Rock' Johnson"],
answer: 3
},
{
question: "Which Oscar winning film has the most uses of the word 'fuck' and its derivatives?",
choices: ["The Silence of the Lambs", "The Departed", "Bridge on the River Kwai", "Dances with Wolves"],
answer: 1
},
{
question: "Who was the first African American actress to win an Academy Award?",
choices: ["Viola Davis", "Kerry Washington", "Halle Berry", "Angela Bassett"],
answer: 2
},
{
question: "The movie Jaws was filmed by which famous director?",
choices: ["Alfred Hitchcock", "Steven Spielberg", "Martin Scorsese", "Quentin Tarantino"],
answer: 1
},
{
question: "What Star Wars actress had an early role in the movie Léon: The Professional?",
choices: ["Daisy Ridley", "Carrie Fisher", "Natalie Portman", "Lupita Nyong'o"],
answer: 2
},
{
question: "Robin Williams won an Academy Award for best supporting actor in which 1997 film about a South Boston janitor?",
choices: ["Good Will Hunting", "The Departed", "The Fighter", "Fuzz" ],
answer: 0
},
{
question: "What is the name of Mickey Mouse's dog?",
choices: ["Odie", "Snoopy", "Brian", "Pluto"],
answer: 3
}];
var listMusic = [{
question: "What was the name of Michael Jackson's first solo album as an adult?",
choices: ["Off The Wall", "Dangerous", "Bad", "Thriller"],
answer: 0
},
{
question: "In what city was Ludwig van Beethoven born?",
choices: ["Frankfurt", "Vienna", "Bonn", "Berlin"],
answer: 2
},
{
question: "In what year did Paul McCartney announce he was quitting the Beatles?",
choices: ["1968", "1970", "1972", "1969"],
answer: 1
},
{
question: "New Orleans is known as the birthplace of what type of music?",
choices: ["Blues", "Country", "Rock and Roll", "Jazz"],
answer: 3
},
{
question: "Who was the lead singer of the rock band Queen?",
choices: ["Freddie Mercury", "Steve Perry", "Dave Grohl", "Neil Young"],
answer: 0
},
{
question: "ABBA was a pop group from what country?",
choices: ["Russia", "Brazil", "Sweden", "England"],
answer: 2
},
{
question: "What was the first music video played on MTV?",
choices: ["Video Killed the Radio Star", "Thriller", "Burning Down the House", "Total Eclipse of the Heart"],
answer: 0
},
{
question: "Rapper Vanilla Ice had a hit song titled 'Ice Ice Baby'. From which othr song did 'Ice Ice Baby' sample from?",
choices: ["Bohemian Rhapsody", "Under Pressure", "Let's Dance", "Modern Love"],
answer: 1
},
{
question: "Which music group has received the most Grammy Awards?",
choices: ["The Beatles", "Pearl Jam", "U2", "Destiny's Child"],
answer: 2
},
{
question: "Who composed the scores for films such as Star Wars, Indiana Jones, Jurassic Park, and Schindler's List?",
choices: ["Hans Zimmer", "Ennio Morricone", "Danny Elfman", "John Williams"],
answer: 3
}];
var listSports = [
{
question: "In what year was the 4 minute mile first achieved?",
choices: ["1946", "1954", "1963", "1977"],
answer: 1
},
{
question: "Shaquille O'Neal retired in 2011 from what sport?",
choices: ["Hockey", "Football", "Soccer", "Basketball"],
answer: 3
},
{
question: "The Grand Slam tournaments are the four most important events in which two sports?",
choices: ["Tennis & Golf", "Basketball & Badminton", "Golf & Frisbee", "Soccer & Rugby"],
answer: 0
},
{
question: "El Clásico is the name given to soccer matches between which two teams?",
choices: ["Real Madrid & FC Barcelona", "Mexico & Argentina", "Colombia & Costa Rica", "El Salvador & Spain"],
answer: 0
},
{
question: "Which hockey player has won the most Stanley Cups with 11 wins?",
choices: ["Wayne Gretzky", "Alexander Ovechkin", "Henri Richard", "Sidney Crosby"],
answer: 2
},
{
question: "Tiger Woods became a professional golfer in what year?",
choices: ["1985", "1996", "2000", "2010"],
answer: 1
},
{
question: "Which team won the 2016 Super Bowl?",
choices: ["Seahawks", "Cowboys", "Greenbay Packers", "Broncos"],
answer: 3
},
{
question: "The Walker Law, passed in 1920 in New York, was a law that regulated which sport?",
choices: ["Football", "Lacrosse", "Boxing", "Basketball"],
answer: 2
},
{
question: "Who was the shortest player ever to play in the NBA?",
choices: ["Muggsy Bogues", "Isaiah Thomas", "Nate Robinson", "Earl Boykins"],
answer: 0
},
{
question: "Where did the sport of curling originate?",
choices: ["Canada", "England", "Scotland", "USA"],
answer: 2
}];
var categories = ["Animals", "Art", "Biology", "Chemistry", "Computers",
"Food", "Germany", "Literature", "Movies", "Music",
"Sports"];
//Get values:
var nav = document.getElementById("pageItems");
var next = document.getElementById("pageNext");
var back = document.getElementById("pageBack");
var reset = document.getElementById("reset");
var num = document.getElementById("num");
var quest = document.getElementById("question");
var choices = document.getElementsByName("choice");
var catButtons = document.getElementsByClassName("cat");
var labels = document.getElementsByTagName("label");
//trivia object
function trivia(mainId, quizId, resultsId, choiceId, msgId) {
this.mainId = mainId;
this.quizId = quizId;
this.resultsId = resultsId;
this.choiceId = choiceId;
this.msgId = msgId;
this.checked = false;
this.choice = '';
this.selection = '';
this.count = 0;
this.question = '';
this.currentScore = '';
this.score = 0;
this.list = '';
this.selections = {
1:'',
2:'',
3:'',
4:'',
5:'',
6:'',
7:'',
8:'',
9:'',
10:''
};
}
//starts 10 question quiz for selected category
trivia.prototype.getCategory = function(value) {
this.list = window[value];
this.fillForm(this.count);
this.showQuestion();
this.setPagination(this.list);
}
// Set up pagination
trivia.prototype.setPagination = function(list) {
this.createButtons(list.length);
}
trivia.prototype.createButtons = function(buttonCount) {
for (var i = 0; i < buttonCount; i++) {
var button = document.createElement('li');
var buttonId = 'page-' + (i + 1);
var buttonLink = document.createElement('a');
buttonLink.setAttribute('href', '#');
var linkText = document.createTextNode(i + 1);
buttonLink.appendChild(linkText);
button.setAttribute('class', 'page-item page-item-num');
button.setAttribute('id', buttonId);
button.appendChild(buttonLink);
nav.insertBefore(button, next);
var currentButton = document.getElementById(buttonId);
currentButton.addEventListener("click", function(e) {
debugger;
this.setFormByPage(i);
}.bind(this), false);
}
}
//Populates the page with a new question and 4 possible answers
trivia.prototype.fillForm = function() {
if(this.list[this.getCount()].question) {
var choices = document.getElementsByName(this.choiceId);
this.question = this.getCount() + 1;
num.innerHTML = this.question;
quest.innerHTML = this.list[this.getCount()].question;
for (var i = 0; i < choices.length; i++) {
choices[i].innerHTML = this.list[this.getCount()].choices[i];
}
}
}
//Hides the category page and shows the quiz page
trivia.prototype.showQuestion = function() {
document.getElementById(this.mainId).style.visibility = "hidden";
document.getElementById(this.quizId).style.visibility = "visible";
}
//Calls functions when the 'next' button is clicked. If no answer is selected, the user is notified.
//If all the questions are answered, the final score is announced to the user
trivia.prototype.nextQuestion = function() {
if(!this.checked) {
this.requireInput();
} else {
this.checkFinish();
}
}
//Increase count used to track progress through the questions
trivia.prototype.increaseCount = function() {
this.count++;
}
//Returns count used to track progress through the questions
trivia.prototype.getCount = function() {
return this.count;
}
//Checks if all questions have been answered. If true, user is notified of score.
//If false, the next question is loaded
trivia.prototype.checkFinish = function() {
this.increaseCount();
if(this.getCount() == this.list.length) {
this.reportScore();
} else {
this.checked = false;
this.fillForm();
this.setNextChoice();
}
}
trivia.prototype.setFormByPage = function(pageIndex) {
this.count = pageIndex;
this.checked = false;
this.fillForm();
this.setNextChoice();
}
//Updates score and tracks user's answers
trivia.prototype.updateAll = function() {
this.selections[this.question] = this.getSelection();
this.getCurrentAnswer();
this.currentScore = this.calcScore();
}
//Returns value of property used to track when an answer has been provided by the user
trivia.prototype.getChoice = function() {
return this.checked;
}
//Notification given when user doesn't provide an answer for a question
trivia.prototype.requireInput = function() {
alert("Please select an answer.");
}
//Shows answers when moving between questions that have been answered by user
trivia.prototype.setNextChoice = function() {
if(this.selections[this.question]) {
this.clearBtns();
this.getPreviousChoice(this.count);
} else {
this.clearBtns();
}
}
//Notification of score to user at the end of the quiz
trivia.prototype.reportScore = function() {
document.getElementById(this.quizId).style.visibility = "hidden";
document.getElementById(this.resultsId).style.visibility = "visible";
var message = document.getElementById(this.msgId);
message.innerHTML = this.currentScore;
}
//Tracks answer provided by user
trivia.prototype.getCheckedValue = function(id) {
!this.getChoice() ? this.checked = true : (this.checked = false, this.removeChecked());
this.choice = document.getElementById(id);
this.choice.classList.toggle("active");
this.selection = this.choice.value;
this.updateAll();
}
//Allows user to change answer and removes highlighting from previous answer
trivia.prototype.removeChecked = function() {
this.checked = true;
this.choice.classList.remove("active");
}
//Returns value for user's answer to the current question
trivia.prototype.getSelection = function() {
return this.selection;
}
//Returns answer for the current question
trivia.prototype.getCurrentAnswer = function() {
for(var q = 0; q < this.list.length; q++) {
if(this.list[q].question == quest.innerHTML) {
return this.list[q].answer;
}
}
}
//Calculates current score based on all answered questions
trivia.prototype.calcScore = function() {
if(this.getSelection() == this.getCurrentAnswer()) {
this.score += 1;
}
return "Your score: " + this.score + " out of " + this.list.length;
}
//Removes 'active' class when a new, unanswered, question is loaded
trivia.prototype.clearBtns = function() {
var choices = document.getElementsByName(this.choiceId);
for (var r = 0; r < choices.length; r++) {
choices[r].classList.remove("active");
}
}
//Provides answer to previously answered question
trivia.prototype.getPreviousChoice = function(position) {
this.checked = true;
var choices = document.getElementsByName(this.choiceId);
for (var c = 0; c < choices.length; c++) {
if(choices[c].value == this.selections[this.question]) {
choices[c].classList.add("active");
}
}
}
//Provides answer to previous question when using 'back' button
trivia.prototype.back = function() {
this.count--;
this.clearBtns();
if(this.count >= 0) {
this.fillForm();
this.getPreviousChoice(this.count);
}
}
//Deletes all game data and returns all property values to the original values
trivia.prototype.clearAll = function() {
this.count = 0;
this.question = '';
this.currentScore = '';
this.score = 0;
this.list = '';
var selections = this.selections;
for(var s in selections) {
selections[s] = '';
}
}
//Calls functions to delete all game data and shows user the main category page
trivia.prototype.startOver = function() {
document.getElementById(this.resultsId).style.visibility = "hidden";
document.getElementById(this.mainId).style.visibility = "visible";
this.clearRadio();
this.clearAll();
}
var myTrivia = new trivia("main", "quiz_area", "results", "choice", "message");
for(var i = 0; i < catButtons.length; i++) {
catButtons[i].addEventListener("click", function() {
myTrivia.getCategory(this.id, "main", "quiz_area");
});
}
next.addEventListener("click", function() {
myTrivia.nextQuestion();
});
back.addEventListener("click", function() {
myTrivia.back();
});
reset.addEventListener("click", function() {
myTrivia.startOver();
});
var choices = document.getElementsByName("choice");
for(var c = 0; c < choices.length; c++) {
choices[c].addEventListener("click", function() {
myTrivia.getCheckedValue(this.id);
});
}
Also see: Tab Triggers