JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="container">
<div class="quizCont">


<div class="question"><h2>Which of the following emails is a scam?</h2></div>
<div class="choices">

<input type="checkbox" id="no1" name="type">
<label for="no1"><span class="pink">A</span> - An email from an estate agent claiming to have brochures attached for properties that may be of interest to you.</label>

<input type="checkbox" id="no2" name="type">
<label for="no2"><span class="pink">B</span> - An email from an internet dating site inviting you to join up now at a discounted price.</label>

<input type="checkbox" id="yes1" name="type">
<label for="yes1"><span class="pink">C</span> - A £90 parking ticket from UK Parking Control Ltd.</label>

<input type="checkbox" id="no3" name="type">
<label for="no3"><span class="pink">D</span> - An email from your child’s school containing a newsletter attached.</label>
  
</div>
<div class="check"><input type="button" name="Check" value="Submit" /></div>

<div class="answer"><p>The answer was <span class="pink">C</span> - A £90 parking ticket from UK Parking Control Ltd.</p>
<p>Emails claiming to be from UK Parking Control Ltd (UKPC) are a known scam. The email tells you to open an attachment to view details of the parking offence…but if you stop and think for just a minute before viewing – how can they find out your email address from a car registration number? </p></div>

<div class="next"><input type="button" name="Next" value="Next Question" /></div>
<div class="number">1/10</div>
</div>
</div>

CSS

.container {max-width:768px;margin:auto;}
.quizCont {background-color:#fff;font-family:arial;font-size:14px;border:1px solid #999;padding:10px;border-radius:4px;}
.number {text-align:right;}
.question h2 {color:#f24495;font-size:16px;text-align:center;margin:20px 0;}
.pink {color:#f24495;font-weight:bold;}

input[type=checkbox] {visibility: hidden;display: none;}
label {color: #000;cursor: pointer;font-size:14px;line-height:20px;padding:10px;border:1px solid #dedede;border-left:5px solid #f24495;display:block;float:none;margin:0 0 5px 0;}
label:hover {background-color: #FEF1F8;}

input[type=checkbox]:checked + label{color: #000;background: #FDDBEE;}
label + input[type=checkbox] + label {}

.check {width:100%;text-align:center;margin:20px 0;}
.check input {padding:7px 30px;background-color: #F55AA4;border:0;color:#fff;border-radius:4px;}

.next {width:100%;text-align:center;margin:20px 0;}
.next input {padding:7px 30px;background-color: #FF8000;border:0;color:#fff;border-radius:4px;}

.answer {line-height:20px;padding:10px;border:1px solid #dedede;border-left:5px solid #FF8000;}

JavaScript

// Quiz

var score = 0;
var score =
var score = +document.calculator.amount.value;

if (document.getElementById('yes1').checked) {
            addpoint;
        }
        
if (document.getElementById('yes2').checked) {
            addpoint;
        }
        

 
var box = this.firstChild;

if (box.className == "arrow") {box.className = "arrow2";}

else {box.className = "arrow";}