<html>
<head>
<style>
</style>
<title>STD 6 Science First SEM aahar na ghatako</title>
<p>STD 6 First Semester Science</p>
<p></p>
<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();
background-attachment: fixed;
font-family: 'Montserrat', sans-serif;
}
{
box-sizing: border-box;
}
.custom-box{
max-width: 800px;
background-image: url("http://apexa.gyanrupen.com/wp-content/uploads/2021/06/apexa.png");
background-size: 720px;
background-position: center;
margin:30px auto;
padding: 50px 40px;
border-radius: 0px;
border:2px solid #4d3106;
}
.quiz-home-box{
text-align:center;
display: none;
}
.quiz-home-box.show{
display: block;
animation: fadeInRight 1s ease;
}
.quiz-home-box h4{
background-color: black;
border: 3px solid #white;
font-size: 20px;
font-weight: 500;
color:#ffffff;
margin: 0 0 30px;
border-style: solid;
}
.btn{
background-color: black;
border: 3px solid #white;
padding: 14px 40px;
color: #ffffff;
font-size: 20px;
border-radius: 0px;
font-family: 'Montserrat', sans-serif;
cursor: pointer;
white-space: nowrap;
margin: 0 10px;
}
.btn:focus{
outline:none;
}
.quiz-box{
background-color: Hotpink;
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: 34px;
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:pink;
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: 0%;
display:inline-block;
}
.quiz-box .stats .quiz-time .remaining-time.less-time{
color:red;
border-color:#b5200d;
}
.quiz-box .stats .score-board{
flex-basis: calc(50% - 20px);
max-width: calc(50% - 20px);
/*background: green;*/
text-align: right;
}
.quiz-box .stats .score-board .correct-answer{
font-weight: 800;
}
.quiz-box .question-box{
background-color: yellow;
padding: 60px 50px;
margin-top: 35px;
border-radius: 0px;
font-size: 18px;
font-weight: 800;
border: 2px solid #4d330a;
text-align: center;
position: relative;
}
.quiz-box .question-box .current-question-num{
height: 50px;
width: 50px;
background-color: white;
border:2px solid #4d3106;
font-size: 18px;
font-weight: 800;
color:#1411e3;
border-radius: 10%;
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: 16px;
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: Aquamarine;
flex-basis: calc(50% - 20px);
max-width: calc(50% - 20px);
margin-top: 30px;
padding: 7px 7px;
text-align: center;
font-size: 15px;
text-transform: uppercase;
font-weight: 600;
color:#231803;
border:2px solid #5e5a53;
border-radius: 0px;
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("http://gyanrupen.com/wp-content/uploads/2021/05/true.jpg");
background-size: 20px;
background-position: center;
background-repeat: no-repeat;
animation: fadeInRight .5s ease;
}
.quiz-box .option-box .option.wrong{
background-color: #a22312;
background-audio :url( "https://gyanrupen.com/wp-content/uploads/2021/10/censor-beep-01.mp3 ");
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:05px;
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: 18px;
font-family: sans-serif;
color: #1d1b19;
}
.custom-box{
padding: 30px 10px 50px 10px;
background-color: #00FFFF;
}
.quiz-box .stat{
font-size:10px;
}
.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>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp9ESg-uHX1tsOGy5I4_fROu-_cLgb77vfLw&usqp=CAU" alt="khorak" >
<div class="quiz-home-box custom-box show">
<h4>
<p> Gujarati</p>
<marquee behavior="scroll" direction="left" scrollamount="12">એક જ દે ચિનગારી </marquee></h4>
<button class="start-quiz-btn btn" type="button">કવીઝ શરૂ કરો</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">સમય સમાપ્ત</span>
</div>
<div class="score-board">
<span class="score-text">સ્કોર:</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 class="next-question-btn btn" type="button">આગળનો પ્રશ્ન</button>
<button class="see-result-btn btn" type="button">તમારું પરિણામ જુઓ</button>
</div>
</div>
<div class="quiz-over-box custom-box">
<h1>
Result</h1>
<h4>
કુલ પ્રશ્નો: <span class="total-questions"></span></h4>
<h4>
જવાબ આપેલ: <span class="total-attempt"></span></h4>
<h4>
સાચા: <span class="total-correct"></span></h4>
<h4>
ખોટા: <span class="total-wrong"></span></h4>
<h4>
ટકાવારી: <span class="percentage"></span></h4>
<button class="start-again-quiz-btn btn" type="button">ફરીથી શરૂ કરો</button>
<button class="go-home-btn btn" type="button">હોમ પર જાઓ</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;
myApp=[
{
question:'કયો કાર્બોહાઇડ્રેટનો પ્રકાર છે ? ',
options:['સ્ટાર્ચ અને શર્કરા','ક્ષાર ','સ્ટાર્ચ ','શર્કરા '],
answer:0,
},
{
question:'વિટામિન A ની ઉણપથી કયો રોગ થાય છે ? ',
options:['બેરીબેરી ','રતાંધળાપણું ','સ્કર્વી ','થાઇરોઇડ '],
answer:1,
},
{
question:'કયા રોગથી હાડકાં નબળા અને પોચા બને છે ? ( ',
options:['બેરીબેરી ','ગોઇટર ','સૂકતાન','કવી '],
answer:2,
},
{
question:'માનવ શરીરની ધીમી વૃદ્ધિ શાની કમીના કારણે થાય છે ? ',
options:['વિટામિન ','ચરબી ','એક પણ નહિ ','પ્રોટીન '],
answer:3,
},
{
question:'સૂર્યપ્રકાશથી શરીરને શું પ્રાપ્ત થાય છે ? ',
options:['વિટામિન A ','વિટામિન D','આયર્ન ','કાર્બોદિત '],
answer:1,
},
{
question:'પ્રોટીનની ચકાસણી માટે કયા દ્રાવણનો ઉપયોગ લેવાય છે ? ',
options:['આયોડિન ','CuSO4','કોસ્ટીક સોડા ','CuSO4 અને કોસ્ટીક સોડા '],
answer:3,
},
{
question:'કાર્બોદિતની સરખામણીમાં વધુ શક્તિ કોણ પ્રદાન કરે છે ? ',
options:['ચરબી ','પ્રોટીન ','વિટામિન ','ક્ષાર '],
answer:0,
},
{
question:'આપણા શરીરના બંધારણ માટે નીચેનામાંથી શું ખૂબ જ જરૂરી છે ? ',
options:['વિટામિન ','પ્રોટીન ','આપેલ તમામ','ચરબી '],
answer:2,
},
{
question:'ત્રુટીજન્ય રોગો અટકાવવા શું જરૂરી છે ? ',
options:['સમતોલ આહાર ','માત્ર પ્રોટીન ','માત્ર વિટામિન ','એક પણ નહિ '],
answer:0,
},
{
question:'કોનો પોષક તત્ત્વોમાં સમાવેશ થતો નથી ? ',
options:['ખનીજ ક્ષાર ','વિટામિન ','રૂક્ષાંશ','એક પણ નહિ '],
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=30;
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>
Comments
Post a Comment