<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enter Name and Mobile Number</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 500px;
margin: 50px auto;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
label {
font-size: 1.2em;
margin-bottom: 5px;
display: block;
}
input[type="text"], input[type="tel"] {
width: 100%;
padding: 10px;
margin: 10px 0;
font-size: 1em;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
font-size: 1em;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>Enter Your Details</h2>
<form id="userForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
<label for="mobile">Mobile Number:</label>
<input type="tel" id="mobile" name="mobile" placeholder="Enter your 10-digit mobile number" pattern="[0-9]{10}" required>
<input type="submit" value="Submit">
</form>
</div>
<script>
document.getElementById("userForm").addEventListener("submit", function(event) {
event.preventDefault();
const name = document.getElementById("name").value;
const mobile = document.getElementById("mobile").value;
if (mobile.match(/^\d{10}$/)) {
alert(`Thank you, ${name}. Your mobile number ${mobile} has been submitted successfully!`);
} else {
alert("Please enter a valid 10-digit mobile number.");
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<title> Quiz Application </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Concert+One&display=swap');
body{
margin:0;
background-image: url(img/bg.jpg);
background-attachment: fixed;
font-family: 'Montserrat', sans-serif;
}
{
box-sizing: border-box;
}
.custom-box{
max-width: 800px;
background-color: #ddd6e1;
margin:30px auto;
padding: 50px 40px;
border-radius: 10px;
border-style: solid;
border-color: blueviolet;
}
.quiz-home-box{
text-align:center;
display: none;
}
.quiz-home-box.show{
display: block;
animation: fadeInRight 1s ease;
}
.quiz-home-box h4{
font-size: 30px;
font-weight: 500;
color:#444444;
margin: 0 0 30px;
border-style: ridge;
}
.btn{
background-color: #4413ac;
border: 2px solid #422c11;
padding: 14px 40px;
color: #ffffff;
font-size: 20px;
border-radius: 30px;
font-family: 'Montserrat', sans-serif;
cursor: pointer;
white-space: nowrap;
margin: 0 10px;
}
.btn:focus{
outline:none;
}
.quiz-box{
background-color: #bad3df;
display: none;
}
.quiz-box.show{
display: block;
animation: fadeInRight 1s ease;
}
.quiz-box .stats{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
font-size: 30px;
text-transform: uppercase;
color: #000000;
}
.quiz-box .stats .quiz-time{
flex-basis: calc(50% - 20px);
max-width: calc(50% - 20px);
/background: red;/
text-align: left;
}
.quiz-box .stats .time-up-text{
/* display: inline-block;*/
color:#f40404;
font-weight: 500;
display: none;
}
.quiz-box .stats .time-up-text.show{
display:inline-block;
animation: fadeInOut 1s linear infinite;
}
@keyframes fadeInOut{
0%{
opacity: 0;
}
50%{
opacity: 2;
}
100%{
opacity: 0;
}
}
.quiz-box .stats .quiz-time .remaining-time{
height: 60px;
width: 60px;
color:#096b36;
border: 2px solid #096b36;
font-weight: 800;
line-height: 56px;
text-align: center;
border-radius: 50%;
display:inline-block;
}
.quiz-box .stats .quiz-time .remaining-time.less-time{
color:#b5200d;
border-color:#b5200d;
}
.quiz-box .stats .score-board{
flex-basis: calc(50% - 20px);
max-width: calc(50% - 20px);
/background: blue;/
text-align: right;
}
.quiz-box .stats .score-board .correct-answer{
font-weight: 800;
}
.quiz-box .question-box{
background-color: #ffffff;
padding: 40px 30px;
margin-top: 40px;
border-radius: 10px;
font-size: 28px;
border: 2px solid #4d330a;
text-align: center;
position: relative;
}
.quiz-box .question-box .current-question-num{
height: 70px;
width: 70px;
background-color: #ffffff;
border:2px solid #4d3106;
font-size: 20px;
font-weight: 800;
color:#1411e3;
border-radius: 50%;
line-height: 68px;
text-align: center;
position: absolute;
top:-35px;
left:50%;
margin-left: -35px;
z-index:1;
}
.quiz-box .question-box .question-text{
font-size: 26px;
font-family: sans-serif;
color:#ac1313;
}
.quiz-box .option-box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.quiz-box .option-box .option{
background-color: #958f8f;
flex-basis: calc(50% - 20px);
max-width: calc(50% - 20px);
margin-top: 30px;
padding: 7px 7px;
text-align: center;
font-size: 20px;
text-transform: uppercase;
font-weight: 500;
color:#231803;
border:2px solid #5e5a53;
border-radius: 30px;
cursor: pointer;
position: relative;
animation: zoomIn .3s linear forwards;
opacity: 0;
}
@keyframes zoomIn{
0%{
transform: scale(0.8);
}
100%{
transform: scale(1);
opacity:1;
}
}
.quiz-box .option-box .option.already-answered{
pointer-events: none;
}
.quiz-box .option-box .option.show-correct{
background-color: #096b36;
border-color:#096b36;
color: #ffffff;
transition: all .3s ease;
}
.quiz-box .option-box .option.correct{
background-color: #096b36;
border-color:#096b36;
color:#ffffff;
opacity:1;
animation: pulse 1s linear;
}
@keyframes pulse{
0%{
transform: scale(1);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1);
}
}
.quiz-box .option-box .option.correct::before{
content: '';
position: absolute;
height: 30px;
width: 30px;
right: 15px;
top:7px;
background-image: url("img/correct.png");
background-size: 20px;
background-position: center;
background-repeat: no-repeat;
animation: fadeInRight .5s ease;
}
.quiz-box .option-box .option.wrong{
background-color: #a22312;
border-color:#a22312;
color: #ffffff;
opacity:1;
animation: shake 1s linear;
}
.quiz-box .option-box .option.wrong::before{
content: '';
position: absolute;
height: 30px;
width: 30px;
right: 15px;
top:7px;
background-image: url("img/wrong.png");
background-size: 20px;
background-position: center;
background-repeat: no-repeat;
animation: fadeInRight .5s ease;
}
@keyframes shake{
0%,30%,50%{
transform: translateX(10px);
}
20%,40%{
transform: translateX(-10px);
}
60%{
transform: translateX(-7px);
}
70%{
transform: translateX(7px);
}
80%{
transform: translateX(-4px);
}
90%{
transform: translateX(4px);
}
100%{
transform: translateX(0px);
}
@keyframes fadeInRight{
0%{
opacity:0;
transform: translateX(40px);
}
100%{
opacity: 1;
transform: translateX(0px);
}
}
}
.quiz-box .answer-description{
background-color: #ffffff;
border:2px solid #c2af91;
margin-top: 20px;
padding: 15px;
border-radius:10px;
color; #555555;
display: none;
}
.quiz-box .answer-description.show{
display: block;
animation: fadeInRight 1s ease;
}
.quiz-box .next-question{
margin-top: 20px;
text-align: center;
}
.see-result-btn,.next-question-btn{
display: none;
}
.see-result-btn.show,
.next-question-btn.show{
display: inline-block;
animation: fadeInRight 1s ease;
}
.quiz-over-box{
text-align: center;
display: none;
}
.quiz-over-box.show{
display: block;
animation: fadeInRight 1s ease;
}
.quiz-over-box h1{
font-size:50px;
font-family: 'Concert One', cursive;
color: #f85943;
margin:0px 3 20px;
}
.quiz-over-box h4{
font-size:25px;
font-weight: normal;
color: #444444;
margin: 15px 0 20px;
}
.quiz-over-box h4 span{
font-weight: 800;
color:#111111;
}
.start-again-quiz-btn,
.go-home-btn{
margin-top: 15px;
}
/responsive/
@media (max-width: 767px){
.custom-box{
background-color: #cbe1e0;
}
.quiz-home-box h4{
font-size: 16px;
}
.btn{
padding: 7px 20px;
font-size: 15px;
}
.quiz-box .question-box{
padding: 40px 0px;
}
.quiz-box .question-box .question-text{
font-size: 17px;
font-family: sans-serif;
color: #1d1b19;
}
.custom-box{
padding: 30px 10px 50px 10px;
background-color: #d5deee;
}
.quiz-box .stat{
font-size:20px;
}
.quiz-box .stats .quiz-time {
flex-basis: calc(60% - 10px);
max-width: calc(60% - 10px);
font-size: 18px;
}
.quiz-box .stats .score-board{
flex-basis: calc(40% - 10px);
max-width: calc(40% - 10px);
font-size: 16px;
}
.quiz-box .stats .quiz-time .remaining-time{
height: 50px;
width: 50px;
line-height: 46px;
color: #045e2e;
border: 2px solid #045e2e;
}
.quiz-box .question-box .current-question-num{
height: 60px;
width: 60px;
line-height: 58px;
top: -30px;
margin-left: -30px;
font-size: 16px;
}
.quiz-box .option-box .option{
flex-basis: 100%;
max-width: 100%;
font-size: 16px;
margin-top: 15px;
}
.quiz-over-box h1{
font-size: 30px;
}
.quiz-over-box h4{
font-size: 20px;
margin: 10px 0 15px;
}
}
</style>
</head>
<body>
<div class="quiz-home-box custom-box show">
<h4>you'll have 15 second to answer each question.</h4>
<button type="button" class="start-quiz-btn btn">Start The Quiz</button>
</div>
<div class="quiz-box custom-box">
<div class="stats">
<div class="quiz-time">
<div class="remaining-time"></div>
<span class="time-up-text">Time's Up</span>
</div>
<div class="score-board">
<span class="score-text">score:</span>
<span class="correct-answer"></span>
</div>
</div>
<div class="question-box">
<div class="current-question-num">
</div>
<div class="question-text">
</div>
</div>
<div class="option-box">
</div>
<div class="answer-description">
</div>
<div class="next-question">
<button type="button" class="next-question-btn btn">Next question</button>
<button type="button" class="see-result-btn btn">See Your Result</button>
</div>
</div>
<div class="quiz-over-box custom-box">
<h1>Quiz Result</h1>
<h4>Total Questions: <span class="total-questions"></span></h4>
<h4>Attempt: <span class="total-attempt"></span></h4>
<h4>Correct: <span class="total-correct"></span></h4>
<h4>Wrong: <span class="total-wrong"></span></h4>
<h4>Percentage: <span class="percentage"></span></h4>
<button type="button" class="start-again-quiz-btn btn">Start Again</button>
<button type="button" class="go-home-btn btn">Go To Home</button>
</div>
<script>
const questionText=document.querySelector(".question-text");
const optionBox=document.querySelector(".option-box");
const currentQuestionNum=document.querySelector(".current-question-num");
const answerDescription=document.querySelector(".answer-description");
const nextQuestionBtn=document.querySelector(".next-question-btn");
const correctAnswers=document.querySelector(".correct-answer");
const seeResultBtn=document.querySelector(".see-result-btn");
const remainingTime=document.querySelector(".remaining-time");
const timeUpText=document.querySelector(".time-up-text");
const quizHomeBox=document.querySelector(".quiz-home-box");
const quizBox=document.querySelector(".quiz-box");
const quizOverBox=document.querySelector(".quiz-over-box");
const startAgainQuizBtn=document.querySelector(".start-again-quiz-btn");
const goHomeBtn=document.querySelector(".go-home-btn");
const startQuizBtn=document.querySelector(".start-quiz-btn");
let attempt=0;
let questionIndex=0;
let score=0;
let number=0;
let myArray=[];
let interval;
// You can put Questions Here
// answer id 1-0, 2-1, 3-2, 4-3,
myApp=[
{
question:'We _________ with our ears.',
options:['are hearing','is hearing','hear ','hears'],
answer:3,
description:"ENGLISH OBJECTIVE QUESTIN SECTION B"
},
{
question:'He always _____________ the truth.',
options:['is speaking','speak','speaks','hss spoken'],
answer:2,
description: "ENGLISH OBJECTIVE QUESTIN SECTION B "
},
{
question:'Gandhijee ______________"Do or die"',
options:['said ','says','say ','had said'],
answer:1
},
{
question:'The chairman ____________ here tomorrow.',
options:['has come','come','was coming','is coming'],
answer:3
},
{
question:'Root word od infidelity is..',
options:['faithfulness','loyalti','disloyalty','convinced'],
answer:2,
description: "ENGLISH b.tech cse SECTION B"
},
{
question:'Root word of BONAFIDE is?',
options:['genuine','authentic','phoney','A an B both'],
answer:3
},
{
question:'Root word of PERFIDY is.. ?',
options:['bold','fareless','deceitfulness','faithfulness'],
answer:2
},
{
question:'There _____________ the train!',
options:['goes','has gone','go','is going'],
answer:0
},
{
question:'There she ______________ !',
options:['live','lives','is living','has lived'],
answer:1
},
{
question:'It ______________ that he id crazy.',
options:['is appearing','appear','appears','was appearing'],
answer:2
},
{
question:'He __________________.',
options:['smokes','is smoking','smoke','has smoked'],
answer:0
},
{
question:'The sun ________________ in the east.',
options:['rise','rises','is rising','rose'],
answer:1
},
{
question:'I ____________ his work now.',
options:['have done','was doing','am doing ','had done'],
answer:2,
description:"ENGLISH OBJECTIVE QUESTIN SECTION B"
},
{
question:'Sohan ___________ a pen already.',
options:['buys','bought','has bought','id buying'],
answer:2,
description: "ENGLISH OBJECTIVE QUESTIN SECTION B "
},
{
question:'_______ you ever _______ the Tajmahal.',
options:['do/ see ','have/seen','did/see ','none of these'],
answer:1
},
{
question:'This is the best that you ___________.',
options:['are doing','had done','did','have done'],
answer:3
},
{
question:'He has been suffering from from this problem __________ his marriage.',
options:['for','from','since','on'],
answer:2,
description: "ENGLISH SECTION B CSE"
},
{
question:'Sohan __________ since childhood.',
options:['limps','has been limping ','has limped','none of these'],
answer:1
},
{
question:'He has been suffering from fever ________ one week ago.',
options:['a','for','since','from'],
answer:2
},
{
question:'He _____________ in the garden yesterday.',
options:['meets','met','has met','is meeting'],
answer:1
},
{
question:'Sohan _________ here one week ago.',
options:['come','was coming','has come','came'],
answer:3
},
{
question:'It is time he ___________ this wor.',
options:['is starting','starts','started','has started'],
answer:2
},
{
question:'If it does not rain, crops _____________.',
options:['does not dry','will dry','has dried','do not dry'],
answer:1
},
{
question:'He __________ to Patna tomorrow',
options:['has gone','had gone','will go','was going'],
answer:2
}
]
function load(){
number++;
questionText.innerHTML=myApp[questionIndex].question;
creatOptions();
scoreBoard();
currentQuestionNum.innerHTML=number + " / " +myApp.length;
}
function creatOptions(){
optionBox.innerHTML="";
let animationDelay=0.2;
for(let i=0; i<myApp[questionIndex].options.length; i++){
const option=document.createElement("div");
option.innerHTML=myApp[questionIndex].options[i];
option.classList.add("option");
option.id=i;
option.style.animationDelay=animationDelay + "s";
animationDelay=animationDelay+0.2;
option.setAttribute("onclick","check(this)");
optionBox.appendChild(option);
}
}
function generateRandomQuestion(){
const randomNumber=Math.floor(Math.random() * myApp.length);
let hitDuplicate=0;
if(myArray.length == 0){
questionIndex=randomNumber;
}
else{
for(let i=0; i<myArray.length; i++){
if(randomNumber == myArray[i]){
//if duplicate found
hitDuplicate=1;
}
}
if(hitDuplicate == 1){
generateRandomQuestion();
return;
}
else{
questionIndex=randomNumber;
}
}
myArray.push(randomNumber);
console.log(myArray)
load();
}
function check(ele){
const id=ele.id;
if(id==myApp[questionIndex].answer){
ele.classList.add("correct");
score++;
scoreBoard();
}
else{
ele.classList.add("wrong");
//show correct option when clicked answer is wrong
for(let i=0; i<optionBox.children.length; i++){
if(optionBox.children[i].id==myApp[questionIndex].answer){
optionBox.children[i].classList.add("show-correct");
}
}
}
attempt++;
disableOptions()
showAnswerDescription();
showNextQuestionBtn();
stopTimer();
if(number == myApp.length){
quizOver();
}
}
function timeIsUp(){
showTimeUpText();
//when time is up Show Correct Answer
for(let i=0; i<optionBox.children.length; i++){
if(optionBox.children[i].id==myApp[questionIndex].answer){
optionBox.children[i].classList.add("show-correct");
}
}
disableOptions()
showAnswerDescription();
showNextQuestionBtn();
if(number == myApp.length){
quizOver();
}
}
function startTimer(){
let timeLimit=15;
remainingTime.innerHTML=timeLimit;
remainingTime.classList.remove("less-time");
interval=setInterval(()=>{
timeLimit--;
if(timeLimit < 10){
timeLimit="0"+timeLimit;
}
if(timeLimit < 6){
remainingTime.classList.add("less-time");
}
remainingTime.innerHTML=timeLimit;
if(timeLimit == 0){
clearInterval(interval);
timeIsUp();
}
},1000)
}
function stopTimer(){
clearInterval(interval);
}
function disableOptions(){
for(let i=0; i<optionBox.children.length; i++){
optionBox.children[i].classList.add("already-answered")
}
}
function showAnswerDescription(){
if(typeof myApp[questionIndex].description !== 'undefined'){
answerDescription.classList.add("show");
answerDescription.innerHTML=myApp[questionIndex].description;
}
}
function hideAnswerDescription(){
answerDescription.classList.remove("show");
answerDescription.innerHTML="";
}
function showNextQuestionBtn(){
nextQuestionBtn.classList.add("show");
}
function hideNextQuestionBtn(){
nextQuestionBtn.classList.remove("show");
}
function showTimeUpText(){
timeUpText.classList.add("show");
}
function hideTimeUpText(){
timeUpText.classList.remove("show");
}
function scoreBoard(){
correctAnswers.innerHTML=score;
}
nextQuestionBtn.addEventListener("click",nextQuestion);
function nextQuestion(){
generateRandomQuestion();
hideNextQuestionBtn();
hideAnswerDescription();
hideTimeUpText();
startTimer();
}
function quizResult(){
document.querySelector(".total-questions").innerHTML=myApp.length;
document.querySelector(".total-attempt").innerHTML=attempt;
document.querySelector(".total-correct").innerHTML=score;
document.querySelector(".total-wrong").innerHTML=attempt-score;
const percentage=(score/myApp.length)*100;
document.querySelector(".percentage").innerHTML=percentage.toFixed(2) +"%";
}
function resetQuiz(){
attempt=0;
//questionIndex=0;
score=0;
number=0;
myArray=[];
}
function quizOver(){
nextQuestionBtn.classList.remove("show");
seeResultBtn.classList.add("show");
}
seeResultBtn.addEventListener("click", ()=>{
quizBox.classList.remove("show");
seeResultBtn.classList.remove("show");
quizOverBox.classList.add("show");
quizResult();
})
startAgainQuizBtn.addEventListener("click", ()=>{
quizBox.classList.add("show");
quizOverBox.classList.remove("show");
resetQuiz();
nextQuestion();
})
goHomeBtn.addEventListener("click", ()=>{
quizOverBox.classList.remove("show");
quizHomeBox.classList.add("show")
resetQuiz();
})
startQuizBtn.addEventListener("click", ()=>{
quizHomeBox.classList.remove("show");
quizBox.classList.add("show");
nextQuestion();
})
//window.onload=()=>{
//}
</script>
</body>
</html>
0 Comments
आप अपना राय दें। 👇