EcoQuiz Prototype

EcoQuiz Prototype, LearnIt Hackathon.

by TheRealJT

HTML

<body>
  <h1>Welcome to EcoQuiz!</h1>
  <h4>Take the Quiz and Find Out if You Practice Sustainable Measures today! </h4>
<hr>
</body>
<h4>Please Only Click One Button Per Answer!
</h4>
<br>
<h3>
  How Often Do You Use Plastic Bottles?
</h3>

<button class="btn1" id="q1btn1">All the Time!</button>
<button class="btn1" id="q1btn2">About 50/50</button>
<button class="btn1" id="q1btn3">Depends on the Day</button>
<button class="btn1" id="q1cbtn">Reusable Bottles All the Way!</button>
<script>
  const q1cbutton = document.getElementById("q1cbtn")
  const q1button1 = document.getElementById("q1btn1")
  const q1button2 = document.getElementById("q1btn2")
  const q1button3 = document.getElementById("q1btn3")
 	
  function handleq1cClick(e){
  score += 1;
  answered += 1;
  console.log(score);
  }
 function handleq1icClick(e){
 advice += potentialAdvice[0]
 answered += 1;
 console.log(advice);
 
 }
 q1cbutton.addEventListener("click", handleq1cClick);
 q1button1.addEventListener("click", handleq1icClick);
 q1button2.addEventListener("click", handleq1icClick);
 q1button3.addEventListener("click", handleq1icClick);
</script>
<br>
<br>
<br>
<br>
<h3>
  Do You Turn All Lights Off When You Leave Your Home?
</h3>

<button class="btn2" id="q2btn1">If I Remember To!</button>
<button class="btn2" id="q2btn2">If I'm Not in a Rush</button>
<button class="btn2" id="q2cbtn">Of Course!</button>
<button class="btn2" id="q2btn3">Ugh! I Always Forget!</button>
<script>
  const q2cbutton = document.getElementById("q2cbtn")
  const q2button1 = document.getElementById("q2btn1")
  const q2button2 = document.getElementById("q2btn2")
  const q2button3 = document.getElementById("q2btn3")
 	
  function handleq2cClick(e){
  score += 1;
  answered += 1;
  console.log(score)
  }
 function handleq2icClick(e){
 advice += potentialAdvice[1]
 answered += 1;
 console.log(advice);
 }
 q2cbutton.addEventListener("click", handleq2cClick);
 q2button1.addEventListener("click", handleq2icClick);
...

CSS

body {
  background: #F0F8FF;
  padding: 20px;
  font-family: Arial;
  text-align: center;
  color: #001e4d;
}
.btn1{
 border: none;
 padding: 15px 20px;
 font-family: Arial;
 font-weight: bold;
 background: #9ca5aa;
 color: white;
 border-radius: 4px;
}

.btn1:hover, .btn1:active, .btn1:focus{
 border: none;
 padding: 15px 20px;
 font-family: Arial;
 font-weight: bold;
 background: white;
 color: #001e4d;
 border-radius: 4px;
}

.btn2{
 border: none;
 padding: 15px 20px;
 font-family: Arial;
 font-weight: bold;
 background: #9ca5aa;
 color: white;
 border-radius: 4px;
}

.btn2:hover, .btn2:active, .btn2:focus{
 border: none;
 padding: 15px 20px;
 font-family: Arial;
 font-weight: bold;
 background: white;
 color: #001e4d;
 border-radius: 4px;
}

.btn3{
 border: none;
 padding: 15px 20px;
 font-family: Arial;
 font-weight: bold;
 background: #9ca5aa;
 color: white;
 border-radius: 4px;
}

.btn3:hover, .btn3:active, .btn3:focus{
 border: none;
 padding: 15px 20px;
 font-family: Arial;
 font-weight: bold;
 background: white;
 color: #001e4d;
 border-radius: 4px;
}

.btn4, .btn5, .submitbtn{
 border: none;
 padding: 15px 20px;
 font-family: Arial;
 font-weight: bold;
 background: #9ca5aa;
 color: white;
 border-radius: 4px;
}

.btn4:hover, .btn4:active, .btn4:focus{
 border: none;
 padding: 15px 20px;
 font-family: Arial;
 font-weight: bold;
 background: white;
 color: #001e4d;
 border-radius: 4px;
}

.btn5:hover, .btn5:active, .btn5:focus{
 border: none;
 padding: 15px 20px;
 font-family: Arial;
 font-weight: bold;
 background: white;
 color: #001e4d;
 border-radius: 4px;
}

JavaScript

// find elements
var score = 0;
var advice = "";
var answered = 0;
var potentialAdvice = ["Try Using more Reusable Water Bottles! ", "Remember to Turn the Lights Off Before you Leave Home! ", "Try Using Public Transportation or Carpooling More!", " Consider Getting Water Saving Faucets!", " Try Unplugging Charging Bricks Not in Use!"];