HTML quiz questions and answers code

 HTML quiz questions and answers code

HTML:-

<div class="contain">

<h1>Question 1</h1>

<h2>What is the HTML full form ?</h2>

<div class="optbox">

<label>

<input type="radio" name="option">

<span class="opt1">(a) Home Tool Markup Language</span>

</label></br>

<label>

<input type="radio" name="option">

<span class="opt2">(b) Hyper Text Markup Language</span>

</label></br>

<label>

<input type="radio" name="option">

<span class="opt3">(c) Hyper Tool Markup Language</span>

</label></br>

<label>

<input type="radio" name="option">

<span class="opt4">(d) Hyper Text Marking Language</span>

</label>

</div>

<input type="text" id="ans" placeholder="ans..">

<button class="check" onclick="question();">Check</button>

</div>

CSS:-

.contain {

width: 1280px;

height: 500px;

background: #E3E4ED;

margin: 0 auto;

}

.contain h1 {

font-size: 25px;

text-align: center;

padding: 10px;

}

.contain h2 {

font-size: 20px;

text-align: center;

padding: 5px;

}

.optbox {

position: relative;

left: 500px;

}

.optbox label {

cursor: pointer;

}

.optbox input {

display: none;

}

.optbox label span {

position: relative;

display: inline-block;

margin: 5px 0;

padding: 10px;

width: 300px;

background: #262626;

color: #fff;

border-radius: 4px;

text-align: center;

transition: .5s;

}

.optbox label input:checked ~ span {

color: #fff;

border: 1px solid #008eff;

color: #62ff00;

border-color: #62ff00;

box-shadow: inset 0 0 30px #008eff;

}

.opt1:hover, .opt2:hover, .opt3:hover, .opt4:hover {

background: #008eff;

}

.contain input[type="text"] {

padding: 5px;

background-color: #333333;

color: #fff;

font-size: 17px;

border-radius: 5px;

margin-left: 500px;

margin-top: 20px;

border: none;

}

.contain .check {

background-color: #5D69D3;

padding: 8px 20px;

border: none;

font-size: 15px;

color: white;

border-radius: 5px;

cursor: pointer;

transition: .5s;

margin-left: 10px;

}

.contain .check:hover {

background-color: #E98C2E;

}

JAVASCRIPT:-

<script type="text/javascript">

function question() {

var word = document.getElementById('ans').value;

if (word === 'b' || word === 'B' || word === 'Hyper Text Markup Language') {

alert("correct");

}

else {

alert("Wrong!! Try again");

}

}

</script>