Untitled

<!DOCTYPE html>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oleo+Script">
<link href="https://fonts.googleapis.com/css?family=Italiana" rel="stylesheet">
<metaname="viewport" content="width=device-width">


<link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Indie+Flower">
<link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet">
<style>
      html {
        background: linear-gradient(to bottom, #cfcdf5,#b4c1f6,#9bc2f7,#82d1f8, #69ebf9);;;
   }

  body {
    color: white;
    font: normal 30px 'Indie Flower', cursive;
   }

  img {
    border: ridge;
    border-radius: 15px;
   }

  a href {
    color:#6461A0;
    text-decoration: none;
   }

  a:hover {
    color: #EFBDEB;
    text-decoration: underline;
   }

  a:visited {
    color: #4B0082;
   }

  h1, h2, h3 {
    font-family: 'Luckiest Guy', serif;
    text-shadow: 4px 4px 4px #aaa;
   }

  .topnav {
    background-color:   #9bc2f7;
    overflow: hidden;
   }
  </style>
    <center>
    <h1>
        HOW MUCH POP CULTURE DO YOU REALLY KNOW?
    </h1>
<div class="topnav">
  <a href= "https://www.homedepot.com/">  Home</a>
  <a href= "https://www.theonion.com/">  News</a>
  <a href="https://en.wikipedia.org/wiki/Contact_(1997_American_film)">Contact</a>
  <a href="https://en.wikipedia.org/wiki/Popular_culture">About</a>
    </div>
</center>
<center><h3>
    TAKE THE QUIZ
</h3></center>
<p>http://codeactually.com/interactivequiz.html <br>

<div id="main">
<div id="header">
</div>
<form id="form1">
<fieldset>

<!-- QUESTION 1 -->
<h3>Who is the oldest of the Kardashian sisters?</h3>
<label for="one_string"><input type="radio" name="one" value="0" id="one_string" />Khloe</label>
<label for="one_join"><input type="radio" name="one" value="5" id="one_join" />Kourtney</label>
<label for="one_info"><input type="radio" name="one" value="0" id="one_info" />Kim</label>
<label for="one_condition"><input type="radio" name="one" value="0" id="one_condition"/>North West</label>

<!-- QUESTION 2 -->
<h3>Which married celebrity couple separated in September, 2016?</h3>
<label for="two_string"><input type="radio" name="two" value="5" id="two_string"/>Brad Pitt and Angelina Jolie</label>
<label for="two_join"><input type="radio" name="two" value="0" id="two_join"/>Beyonce and Jay Z</label>
<label for="two_info"><input type="radio" name="two" value="0" id="two_info" />Zayn and Gigi Hadid</label>
<label for="two_condition"><input type="radio" name="two" value="0" id="two_condition" />Justin Bieber and Selena Gomez</label>

<!-- QUESTION 3 -->
<h3> Who topped the Billboard charts with the single "Love Yourself" in February, 2016? </h3>
<label for="three_string"><input type="radio" name="three" value="0" id="three_string" />Shawn Mendes</label>
<label for="three_join"><input type="radio" name="three" value="0" id="three_join" />Jacob Sartorius</label>
<label for="three_info"><input type="radio" name="three" value="0" id="three_info" />Harry Styles</label>
<label for="three_condition"><input type="radio" name="three" value="5" id="three_condition" /> Justin Bieber</label>

<!-- QUESTION 4 -->
<h3>Which song topped the Billboard charts for 14 consecutive weeks in 2015?</h3>
<label for="four_string"><input type="radio" name="four" value="5" id="four_string" />Uptown Funk by Mark Ronson featuring Bruno Mars</label>
<label for="four_join"><input type="radio" name="four" value="0" id="four_join" />Hotline Bling by Drake</label>
<label for="four_info"><input type="radio" name="four" value="0" id="four_info" />Hello by Adele </label>
<label for="four_condition"><input type="radio" name="four"  value="0" id="four_condition" />That’s what I like by Bruno Mars</label>

<!-- QUESTION 5 -->
<h3>"Which member of the boy band One Direction left the band in March, 2015?"</h3>
<label for="five_string"><input type="radio" name="five" value="5" id="five_string" />Zayn Malik</label>
<label for="five_join"><input type="radio" name="five" value="0" id="five_join" />Niall Horan</label>
<label for="five_info"><input type="radio" name="five" value="0" id="five_info" />Harry Styles</label>
<label for="five_condition"><input type="radio" name="five" value="0" id="five_condition"/>One of the other guys</label>

<!-- QUESTION 6 -->
<h3>Chris Hemsworth plays this superhero?</h3>
<label for="six_string"><input type="radio" name="six" value="0" id="six_string"/>Green Lantern</label>
<label for="six_join"><input type="radio" name="six" value="0" id="six_join"/>The Hulk</label>
<label for="six_info"><input type="radio" name="six" value="5" id="six_info" />Thor</label>
<label for="six_condition"><input type="radio" name="six" value="0" id="six_condition" />Superman</label>

<!-- QUESTION 7 -->
<h3>Which movie was top at the box office in 2015?</h3>
<label for="seven_string"><input type="radio" name="seven" value="0" id="seven_string" />Avengers: Age of Ultron</label>
<label for="seven_join"><input type="radio" name="seven" value="5" id="seven_join" />Star Wars Ep. VII: The Force Awakens</label>
<label for="seven_info"><input type="radio" name="seven" value="0" id="seven_info" />Inside out</label>
<label for="seven_condition"><input type="radio" name="seven" value="0" id="seven_condition" />Jurassic World</label>

<!-- QUESTION 8 -->
<h3>Where was Vitameatavegamin used?</h3>
<label for="eight_string"><input type="radio" name="eight" value="0" id="eight_string" />Friends</label>
<label for="eight_join"><input type="radio" name="eight" value="0" id="eight_join" />Saved by the bell</label>
<label for="eight_info"><input type="radio" name="eight" value="5" id="eight_info" />I Love Lucy</label>
<label for="eight_condition"><input type="radio" name="eight"  value="0" id="eight_condition" />That 70’s show</label>

<!-- QUESTION 9 -->
<h3>What movie did leonardo dicaprio get a oscar for?</h3>
<label for="nine_string"><input type="radio" name="nine" value="0" id="nine_string"/>Titanic</label>
<label for="nine_join"><input type="radio" name="nine" value="5" id="nine_join" />The Revenant</label>
<label for="nine_info"><input type="radio" name="nine" value="0" id="nine_info" />The Great Gatsby</label>
<label for="nine_condition"><input type="radio" name="nine" value="0" id="nine_condition"/>Romeo and Juliet</label>

<!-- QUESTION 10 -->
<h3>How many Kardashian and Jenners are there?</h3>
<label for="ten_string"><input type="radio" name="ten" value="5" id="ten_string"/>17</label>
<label for="ten_join"><input type="radio" name="ten" value="0" id="ten_join"/>21</label>
<label for="ten_info"><input type="radio" name="ten" value="0" id="ten_info" />32</label>
<label for="ten_condition"><input type="radio" name="ten" value="0" id="ten_condition" />20</label>

<!-- QUESTION 11 -->
<h3>What does “yeet” mean (originally)?</h3>
<label for="eleven_string"><input type="radio" name="eleven" value="5" id="eleven_string" />A quick whip of motion of throwing or pulling something forcefully </label>
<label for="eleven_join"><input type="radio" name="eleven" value="0" id="eleven_join" />Can be said to show enthusiasm or excitement</label>
<label for="eleven_info"><input type="radio" name="eleven" value="0" id="eleven_info" />Another word to describe an exciting event such as “shocked”</label>
<label for="eleven_condition"><input type="radio" name="eleven" value="0" id="eleven_condition" />A sarcastic way to say “yes” or “of course"</label>

<!-- QUESTION 12 -->
<h3>What is the current number on the most liked instagram picture?</h3>
<label for="twelve_string"><input type="radio" name="twelve" value="0"     id="twelve_string" />17 mil</label>
<label for="twelve_join"><input type="radio" name="twelve" value="0" id="twelve_join" />90 mil</label>
<label for="twelve_info"><input type="radio" name="twelve" value="0" id="twelve_info" />20 mil</label>
<label for="twelve_condition"><input type="radio" name="twelve"  value="5" id="twelve_condition" />18 mil</label>


<!-- QUESTION 13 -->
<h3>How many times was the most retweeted post tweeted?</h3>
<label for="thirteen_string"><input type="radio" name="thirteen" value="0" id="thirteen_string" />1,143</label>
<label for="thirteen_join"><input type="radio" name="thirteen" value="0" id="thirteen_join" />2,654</label>
<label for="thirteen_info"><input type="radio" name="thirteen" value="5" id="thirteen_info" />3,638</label>
<label for="thirteen_condition"><input type="radio" name="thirteen"  value="0" id="thirteen_condition" />4,702</label>

<!-- QUESTION 14 -->
<h3> Who was involved in the infamous Flashback Mary Scandal?</h3>
<label for="fourteen_string"><input type="radio" name="fourteen" value="0" id="fourteen_string" />Manny Mua</label>
<label for="fourteen_join"><input type="radio" name="fourteen" value="5" id="fourteen_join" />James Charles</label>
<label for="fourteen_info"><input type="radio" name="fourteen" value="0" id="fourteen_info" />Jeffree Star</label>
<label for="fourteen_condition"><input type="radio" name="fourteen"  value="0" id="fourteen_condition" />Gabriel Zamora</label>

<!-- QUESTION 15 -->
<h3>Which of these people has taylor swift dated?</h3>
<label for="fifteen_string"><input type="radio" name="fifteen" value="0" id="fifteen_string" />Harry Styles</label>
<label for="fifteen_join"><input type="radio" name="fifteen" value="0" id="fifteen_join" />Joe Jonas</label>
<label for="fifteen_info"><input type="radio" name="fifteen" value="0" id="fifteen_info" />Jake Gyllenhaal</label>
<label for="fifteen_condition"><input type="radio" name="fifteen"  value="5" id="fifteen_condition" />All of the Above</label>

<!-- QUESTION 16 -->
<h3>Finish this song: “Smelly cat, smelly cat...”</h3>
<label for="sixteen_string"><input type="radio" name="sixteen" value="0" id="sixteen_string" />“Why aren't they feeding youuuuu…?”</label>
<label for="sixteen_join"><input type="radio" name="sixteen" value="5" id="sixteen_join" />“What are they feeding youuuuu…?</label>
<label for="sixteen_info"><input type="radio" name="sixteen" value="0" id="sixteen_info" />“Who are youuuuu…?”</label>
<label for="sixteen_condition"><input type="radio" name="sixteen"  value="0" id="sixteen_condition" />“What are youuuu…?”</label>

<!-- QUESTION 17 -->
<h3>In what movie is the quote “AS IF” from?</h3>
<label for="seventeen_string"><input type="radio" name="seventeen" value="0" id="seventeen_string" />Mean Girls</label>
<label for="seventeen_join"><input type="radio" name="seventeen" value="0" id="seventeen_join" />10 Things I hate about you</label>
<label for="seventeen_info"><input type="radio" name="seventeen" value="0" id="seventeen_info" />Clueless</label>
<label for="seventeen_condition"><input type="radio" name="seventeen"  value="5" id="seventeen_condition" />One of the HSM movies</label>

<!-- QUESTION 18 -->
<h3>How many seasons are the simpsons are there?</h3>
<label for="eighteen_string"><input type="radio" name="eighteen" value="0" id="eighteen_string" />32</label>
<label for="eighteen_join"><input type="radio" name="eighteen" value="0" id="eighteen_join" />20</label>
<label for="eighteen_info"><input type="radio" name="eighteen" value="5" id="eighteen_info" />29</label>
<label for="eighteen_condition"><input type="radio" name="eighteen"  value="0" id="eighteen_condition" />30</label>

<!-- QUESTION 19 -->
<h3>What is the slang definition for “Wig”?</h3>
<label for="nineteen_string"><input type="radio" name="nineteen" value="5" id="nineteen_string" />Another way of describing that you're surprised or “shook"</label>
<label for="nineteen_join"><input type="radio" name="nineteen" value="0" id="nineteen_join" />A way of saying something is awesome</label>
<label for="nineteen_info"><input type="radio" name="nineteen" value="0" id="nineteen_info"/>Another word for gross</label>
<label for="nineteen_condition"><input type="radio" name="nineteen"  value="0" id="nineteen_condition" />Something you say as a code word for “uncomfortable”

<!-- QUESTION 20 -->
<h3>How do you think you did on this test?</h3>
<label for="twenty_string"><input type="radio" name="twenty" value="5" id="twenty_string" />YEET</label>
<label for="twenty_join"><input type="radio" name="twenty" value="5" id="twenty_join" /> SHOOK </label>
<label for="twenty_info"><input type="radio" name="twenty" value="5" id="twenty_info" />OMG WIG</label>
<label for="twenty_condition"><input type="radio" name="twenty"  value="5" id="twenty_condition" />eh...</label>


<br>
<br><center>
<button type="submit" value="Submit">Submit</button>
</fieldset>
</form>
<p>Your grade is: <span id="grade">__</span></p>
<p id="grade2"></p>


<script>
document.getElementById("form1").onsubmit=function() {
   one = parseInt(document.querySelector('input[name = "one"]:checked').value);
   two = parseInt(document.querySelector('input[name = "two"]:checked').value);
   three = parseInt(document.querySelector('input[name = "three"]:checked').value);
   four = parseInt(document.querySelector('input[name = "four"]:checked').value);
   five = parseInt(document.querySelector('input[name = "five"]:checked').value);
   six = parseInt(document.querySelector('input[name = "six"]:checked').value);
   seven = parseInt(document.querySelector('input[name = "seven"]:checked').value);
   eight = parseInt(document.querySelector('input[name = "eight"]:checked').value);
   nine = parseInt(document.querySelector('input[name = "nine"]:checked').value);
   ten = parseInt(document.querySelector('input[name = "ten"]:checked').value);
   eleven = parseInt(document.querySelector('input[name = "eleven"]:checked').value);
   twelve = parseInt(document.querySelector('input[name = "twelve"]:checked').value);
   thirteen = parseInt(document.querySelector('input[name = "thirteen"]:checked').value);
   fourteen = parseInt(document.querySelector('input[name = "fourteen"]:checked').value);
   fifteen = parseInt(document.querySelector('input[name = "fifteen"]:checked').value);
   sixteen = parseInt(document.querySelector('input[name = "sixteen"]:checked').value);
   seventeen = parseInt(document.querySelector('input[name = "seventeen"]:checked').value);
   eighteen = parseInt(document.querySelector('input[name = "eighteen"]:checked').value);
   nineteen = parseInt(document.querySelector('input[name = "nineteen"]:checked').value);
   twenty = parseInt(document.querySelector('input[name = "twenty"]:checked').value);

   result = one + two + three + four + five + six + seven + eight + nine + ten + eleven + twelve + thirteen + fourteen + fifteen + sixteen + seventeen + eighteen + nineteen + twenty;


document.getElementById("grade").innerHTML = result;


if (result == 0) {result2 = "I don't think you studied."};
if (result == 5) {result2 = "You need to spend more time. Try again."};
if (result == 10) {result2 = "You need to spend more time. Try again."};
if (result == 15) {result2 = "You need to spend more time. Try again."};
if (result == 20) {result2 = "You need to spend more time. Try again."};
if (result == 25) {result2 = "You need to spend more time. Try again."};
if (result == 30) {result2 = "I think you could do better. Try again."};
if (result == 35) {result2 = "I think you could do better. Try again."};
if (result == 40) {result2 = "I think you could do better. Try again."};
if (result == 45) {result2 = "I think you could do better. Try again."};
if (result == 50) {result2 = "I think you could do better. Try again."};
if (result == 55) {result2 = "I think you could do better. Try again."};
if (result == 60) {result2 = "I think you could do better. Try again."};
if (result == 65) {result2 = "I think you could do better. Try again."};
if (result == 70) {result2 = "I think you could do better. Try again."};
if (result == 75) {result2 = "So close. Try again."};
if (result == 80) {result2 = "So close. Try again."};
if (result == 85) {result2 = "So close. Try again."};
if (result == 90) {result2 = "Excellent!"};
if (result == 95) {result2 = "Excellent!"};
if (result == 100) {result2 = "Excellent!"};
document.getElementById("grade2").innerHTML = result2;

</script>