Passion Project

Quiz

Question 1: What is your favorite color?

Question 2: What is your favorite drink?

Question 3: What is your favorite animal?

Question 4: What is your occupation?

Calculating...

Estimated Time:

The Meaning of Life is...

(scroll)

42!

HTML File:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Passion Project</title> <link href="style.css" rel="stylesheet"> </head> <body> <header> <h1>The Meaning of Life</h1> <p>Magrathea Corp | Ash Johnson</p> </header> <main class="quiz"> <h2>Quiz</h2> <div id="question1" class="question"> <p>Question 1: What is your <i>favorite</i> color?</p> <div class="quesButtons"> <button id="q1a1">Red</button> <button id="q1a2">A Super Intelligent Shade of Blue</button> <button id="q1a3">Yellow</button> <button id="q1a4">Blue</button> </div> <p id="q1final"></p> </div> <div id="question2" class="question"> <p>Question 2: What is your favorite <strong>drink</strong>?</p> <div class="quesButtons"> <button id="q2a1">Coffee</button> <button id="q2a2">Tea</button> <button id="q2a3">A Tea Like Substance</button> <button id="q2a4">Juice</button> </div> </div> <div id="question3" class="question"> <p>Question 3: What is your favorite animal?</p> <div class="quesButtons"> <button id="q3a1">The manifestaion of 5th Demenional Creatures in the Form of Mice</button> <button id="q3a2">Cat</button> <button id="q3a3">Dog</button> <button id="q3a4">Turtle</button> </div> </div> <div id="question4" class="question"> <p>Question 4: What is your occupation?</p> <div class="quesButtons"> <button id="q4a1">Educator</button> <button id="q4a2">Construction Worker</button> <button id="q4a3">Global Architect</button> <button id="q4a4">Other</button> </div> </div> <h2 id="cal" class="quizFin">Calculating...</h2> <div id="timeEst"> <h3 id="est" class="quizFin">Estimated Time:</h3> <img src="./loading-45.gif" alt="Loading GIF" width="12px" id="loading" class="quizFin"> </div> <div id="timeline"> </div> <div id="end"> <h2>The Meaning of Life is...</h2> <p id="scroll">(scroll)</p> <p id="num42">42</p> </div> <h2>HTML File:</h2> <p></p> <h2>CSS File:</h2> <p></p> <h2>JS File:</h2> </main> <script src="./main.js"></script> </body> </html>

CSS File:

* { margin: 0%; border: 0px; padding: 0px; } header { z-index: 1; margin: 0px; padding-top:10px; width: 100%; height:50px; background-color: rgb(211, 211, 211); float: top; position: fixed; } h1 { background-color: rgb(211, 211, 211); padding-left: 40%; display: inline; } h2 { text-align:center; font-family: rubik, sans-serif; margin:auto; margin-top: 20px; font-size: 40px; } h3 { text-align: center; font-family: rubik, sans-serif; font-weight: 50; } p { text-align:center; font-family: rubik, sans-serif; padding-top: 30px; margin: auto; } header p { background-color: rgb(211, 211, 211); padding-top: 10px; padding-right: 20px; font-family: rubik, sans-serif; float: right; } .quiz { z-index: 0; margin: 200px 20%; width: 60%; height:20000px; background-color: rgb(242, 242, 242); position:absolute; } .quesButtons { padding: 5px 10%; margin: 5px 5%; width: 90%; height:50px; } button { width: 20%; height: 60px; display: inline-block; background-color: rgb(201, 224, 250); border:1px solid black; } #q3a1 { font-size: 11px; } .question { margin-top:40px; } #question2 { opacity: 0; } #question3 { opacity: 0; } #question4 { opacity: 0; } #q1a1:hover { background-color: rgb(181, 200, 222); } #q1a2:hover { background-color: rgb(181, 200, 222); } #q1a3:hover { background-color: rgb(181, 200, 222); } #q1a4:hover { background-color: rgb(181, 200, 222); } #q2a1:hover { background-color: rgb(181, 200, 222); } #q2a2:hover { background-color: rgb(181, 200, 222); } #q2a3:hover { background-color: rgb(181, 200, 222); } #q2a4:hover { background-color: rgb(181, 200, 222); } #q3a1:hover { background-color: rgb(181, 200, 222); } #q3a2:hover { background-color: rgb(181, 200, 222); } #q3a3:hover { background-color: rgb(181, 200, 222); } #q3a4:hover { background-color: rgb(181, 200, 222); } #q4a1:hover { background-color: rgb(181, 200, 222); } #q4a2:hover { background-color: rgb(181, 200, 222); } #q4a3:hover { background-color: rgb(181, 200, 222); } #q4a4:hover { background-color: rgb(181, 200, 222); } .quizFin { opacity: 0; } #cal { margin-top: 100px; } #loading { margin-top: 25px; float: center; } #est { display: inline; } #timeEst { width: 160px; margin: auto; } .time { font-family: 'Times New Roman', Times, serif; margin-right: 70%; } .line { margin-top: 5px; margin-bottom: -20px; margin-left: 5%; width: 30%; height: 2px; background-color: black; } #scroll { margin-top: 0px; padding-top: 5px; font-size: small; } #num42 { margin-top: 500px; font-size: 120px; font-weight: 600; } #end { opacity: 0; } footer { height: 70px; width: 100%; background-color:rgb(211, 211, 211); position: absolute; bottom: 0px; }

JS File:

//Code for continuing after question one const ques1 = document.getElementById('question1'); const q1a1 = document.getElementById('q1a1'); const q1a2 = document.getElementById('q1a2'); const q1a3 = document.getElementById('q1a3'); const q1a4 = document.getElementById('q1a4'); const ques2 = document.getElementById('question2'); const q2a1 = document.getElementById('q2a1'); const q2a2 = document.getElementById('q2a2'); const q2a3 = document.getElementById('q2a3'); const q2a4 = document.getElementById('q2a4'); const ques3 = document.getElementById('question3'); const q3a1 = document.getElementById('q3a1'); const q3a2 = document.getElementById('q3a2'); const q3a3 = document.getElementById('q3a3'); const q3a4 = document.getElementById('q3a4'); const ques4 = document.getElementById('question4'); const q4a1 = document.getElementById('q4a1'); const q4a2 = document.getElementById('q4a2'); const q4a3 = document.getElementById('q4a3'); const q4a4 = document.getElementById('q4a4'); const cal = document.getElementById('cal'); const est = document.getElementById('est'); const timeEst = document.getElementById('timeEst'); const load = document.getElementById('loading'); const timeline = document.getElementById('timeline'); const end = document.getElementById('end'); //function when clicked function ques1Click() { ques2.style.opacity = 1; } function ques2Click() { ques3.style.opacity = 1; } function ques3Click() { ques4.style.opacity = 1; } //Estimated Time: <i>7.5 Million Years function ques4Click() { if (cal.style.opacity != 1) { cal.style.opacity = 1; load.style.opacity = 1; est.style.opacity = 1; setTimeout(function() { est.innerHTML = "Estimated Time: <i>7.5 Million Years</i>"; timeEst.style.width = '440px' timeEst.style.margin = 'auto' est.style.margin = '0% 0% 0% 38%'; load.style.opacity = 0; for (let i = 25000; i <= 7500000 - 25000; i += 25000) { let p = document.createElement("p"); p.id = i p.className = "time" if (i % 500000 == 0) { let line = document.createElement("div"); line.className = "line" timeline.appendChild(line); } p.innerHTML = i + " Years" timeline.appendChild(p); } let line = document.createElement("div"); line.className = "line" line.style.width = '90%' timeline.appendChild(line); let p = document.createElement("p"); p.style.fontSize = '50px' p.style.margin = '50px 0px 0px 0px'; p.innerHTML = '7,500,000' + " Years Later" timeline.appendChild(p); end.style.opacity = 1; }, 5500); } } //click registers q1a1.addEventListener('click', ques1Click); q1a2.addEventListener('click', ques1Click); q1a3.addEventListener('click', ques1Click); q1a4.addEventListener('click', ques1Click); q2a1.addEventListener('click', ques2Click); q2a2.addEventListener('click', ques2Click); q2a3.addEventListener('click', ques2Click); q2a4.addEventListener('click', ques2Click); q3a1.addEventListener('click', ques3Click); q3a2.addEventListener('click', ques3Click); q3a3.addEventListener('click', ques3Click); q3a4.addEventListener('click', ques3Click); q4a1.addEventListener('click', ques4Click); q4a2.addEventListener('click', ques4Click); q4a3.addEventListener('click', ques4Click); q4a4.addEventListener('click', ques4Click);