Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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.

+ add another resource

Packages

Add Packages

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.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>
              
            
!

CSS

              
                @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%;
}
              
            
!

JS

              
                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);
  });
}




              
            
!
999px

Console