buzzquiz/index.html at master · mainyanim/buzzquiz · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
<head>
  <title>BuzzQuiz</title>
  <meta charset="utf-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="css/stylesheet.css">

  <!-- <link rel = "stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
  </head>
    <body>

      <!-- HEADER -->
      <div id = "header">
      </div>
      <!-- START -->
      <div id = "start">
        <div id = "startPosition">
          <img src = "pic/page1.jpg" width="70%"></br>
          <input id = "btnToAge" type = "submit" value = "I am ready!" onclick="goToName()">
        </div>
      </div>
      <!-- First Question -->
      <div id = "name">
        <p class = "title">What is your name?</p>
          <img src = "pic/page2.jpg" width = "70%"></br>
        <input id = "username" type = "text"></br>
        <input id = "btnNext" type = "submit" onclick="showName();goToAge()">
      </div>
      <!-- SECOND Question -->
      <div id = "age">
        <p class = "title">What is your age?</p>
          <img src = "pic/page3.jpg" width="65%"></br>
        <input id = "userAge" type = "number"></br>
        <input id = "btnNext" type = "submit" onclick = "showAge();goToGender()">
      </div>
      <!-- Third Question -->
      <div id = "gender">
        <p class = "title">What is your gender?</p>
          <img src = "pic/gender/gender2.jpg" width="25%">
          <img src = "pic/gender/gender1.jpg" width="25%">
          <img src = "pic/gender/gender3.jpg" width="25%">
          <form>
            <input class = "radioinput" type="radio"  name="selectedGender" value="Female" />
              Cute girl!
            <input class = "radioinput" type="radio"  name="selectedGender" value="Male" />
              Amazing man!
            <input class = "radioinput" type="radio"  name="selectedGender" value="DUNNO" />
              LOOK AT ME!
          </form>
        <input id = "btnNext" type = "submit" onclick = "showGender();goToInterests()">
      </div>
      <!-- Fourth Question -->
      <div id = "interests">
        <p class = "title">What you like to do the most?</p>
          <input type = "image" src = "pic/likes/booze.jpg" id = "booze" value = "rick" width="256" height="256" onclick = "showInterestRick()">
          <input type = "image" src = "pic/likes/girls.jpg" id = "girls" value = "morty" width="256" height="256" onclick = "showInterestMorty()">
          <input type = "image" src = "pic/likes/boys.jpg" id = "boys" value = "summer" width="256" height="256" onclick = "showInterestSummer()"></br>

          <input type = "image"  src = "pic/likes/home.jpg" id = "stayingHome" width="256" height="256" onclick = "showInterestMorty()">
          <input type = "image"  src = "pic/likes/science.jpg" id = "science" width="256" height="256" onclick="showInterestRick()">
          <input type = "image"  src = "pic/likes/parties.jpg" id = "parties" value = "summer" width="256" height="256" onclick="showInterestSummer()"></br>
      <input id = "btnNext" type = "submit" onclick = "goToAdventure()">
      </div>
      <!-- Fifth Question -->
      <div id = "adventure">
        <p class = "title">How much do you like adventures?</p>
          <img src = "pic/page6.jpg"></br>
            <input type = "range" id = "adventureLover" value = "50">
          <button id = "btnNext" onclick = "ifAdventure();goToResult();congratsYou()">Let's go!</button>
      </div>
      <!-- Result -->
      <div id = "result">

      </div>

    </body>
    <script src="js/foo.js"></script>

  </html>