Fill the Subject and topic Name Then click on OK button and Create a Question set
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
border: solid 3px #cccccc;
width: 40%;
text-align: center;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
box-shadow: 3px 2px 5px #cccccc;
}
h2{
color: green;
}
textarea{
width: 80%;
box-shadow: 3px 2px 5px #cccccc;
}
input[type="text"]{
box-shadow: 3px 2px 5px #cccccc;
border-radius: 5px;
width: 80%;
height: 25px;
}
input[type="radio"]{
font-size: 30px;
width: 25px;
height: 19px;
}
.button1{
background-color: darkgreen;
height: 30px;
width: 300px;
color: white;
border-radius: 5px;
cursor:pointer;
}
.button2{
background-color: palevioletred;
height: 30px;
width: 200px;
color: white;
border-radius: 5px;
cursor:pointer;
}
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
margin-top: 20px;
display: none;
}
</style>
<script>
function showHideDiv(ele) {
var srcElement = document.getElementById(ele);
if (srcElement != null) {
if (srcElement.style.display == "block") {
srcElement.style.display = 'none';
}
else {
srcElement.style.display = 'block';
}
return false;
}
}
</script>
</head>
<body>
<h2><b>CREATE QUESTION SET</b></h2>
<hr>
<b>SUBJECT:</b><br><input type="text" ><br><br>
<b>TOPIC:</b><br> <input type="text" ><br><br>
<button class="button2" onclick="showHideDiv('myDIV')"><b>OK</b></button>
<div id="myDIV">
<h4><b>Add Question to Set</b></h4>
<textarea rows="4" cols="40" placeholder="Write your question.............???">
</textarea><br><br>
<input type="text" placeholder="Option A"><br><br>
<input type="text" placeholder="Option B"><br><br>
<input type="text" placeholder="Option C"><br><br>
<input type="text" placeholder="Option D"><br>
<h4><b>ANSWER</b></h4>
<div class="dj">
A<input type="radio" name="option">
B<input type="radio" name="option">
C<input type="radio" name="option">
D<input type="radio" name="option"><br><br>
</div>
<button class="button1"><b>ADD TO SET</b></button>
</div>
</body>
</html>
.jpg)
Its awesome, learn javascript more
ReplyDelete