Created By Html Quiz Generator
Time's Up
score :
Name : Apu
Roll : 3
Total Questions:
Correct: | Wrong:
Attempt: | Percentage:
Created By Html Quiz Generator
Time's Up
score :
CG GK quiz
जनवरी 11, 2022
0
*{ box-sizing: border-box; } .quizbox-3schools{ max-width: 800px; margin:15px auto; padding:40px 29px;text-align:center;border-radius: 10px; border:2px solid #0000ff; background-color:#adba1a; box-shadow:0 0 4px #000; } .quiz-home-box{ display:none;} .quiz-home-box.show{ display: block; } .quizbox-3schools .qbtn{ padding: 12px 35px; color: #ffffff; background-color:#0077ff; border: 2px solid #000000; font-size: 20px; border-radius: 5px; font-family: 'Montserrat', sans-serif; cursor: pointer; white-space: nowrap; margin: 0 10px; }.quizbox-3schools .qbtn:focus{ outline:none; } .quiz-box{ display: none; } .quiz-box.show{ display: block; } .quiz-box .setting-3schools{ display: flex; flex-wrap: wrap; justify-content: space-between; font-size:30px; } .setting-3schools .quiz-time{width:50%; text-align: left; } .quiz-box .time-up-text{ color:#ff00ff; font-weight: 500; display: none;margin:0 auto 15px;} .time-up-text.show{ display:block; animation: fadeInOut 1s linear infinite; } @keyframes fadeInOut{ 0%{ opacity: 0; } 50%{ opacity: 1; } 100%{ opacity: 0; } } .quiz-box .setting-3schools .quiz-time .remaining-time,.score-text{ height: 50px; width:100%; color:#059e4c; border: 2px solid #059e4c; background-color: #fff; font-weight:600; border-radius: 50%; display:flex;justify-content:center;align-items:center; } .quiz-box .setting-3schools .quiz-time .remaining-time.less-time{ color:#d23723; border-color:#d23723; } .setting-3schools .score-board{width:50%;text-align: right; } .setting-3schools .score-board .correct-answer{ font-weight: 800; } .quiz-box .question-box{ background-color:#ffffff;padding: 25px 30px; margin-top:35px; border-radius: 10px; border:2px solid #000000; text-align: center; position: relative; } .quiz-box .question-box .current-question-num{ height: 55px; width: 90px; background-color:#ffffff; border:2px solid #000000; font-size: 20px; font-weight: 800; color:#000000; border-radius:8px; line-height: 50px; text-align: center; position: absolute; top:-95px; left:50%; margin-left: -35px; z-index:1; } .quiz-box .question-box .question-text{ font-size:22px; font-family: 'Concert One', cursiv; color:#000000; } .quizbox-3schools .uInfo{margin-bottom:15px;} .quizbox-3schools input[type="text"]{width:calc(50% - 6px);border-radius:2px;border:none;outline:none;padding:3px;text-align:center;box-shadow:1px 0 5px rgba(60,60,60,0.5);} .quiz-box .answerBox{ display: flex; flex-wrap: wrap; justify-content: space-between; } .answerBox .option{background-color:#ffffff; flex-basis: calc(50% - 20px); max-width: calc(50% - 20px); margin-top: 30px; padding: 7px 13px; font-size: 20px; color:#000000; box-shadow:0 0 4px rgba(60,60,20,.3);border-radius:5px;text-align:left; cursor: pointer; position: relative; animation: zoomIn .4s linear forwards; opacity: 0; } @keyframes zoomIn{ 0%{ transform: scale(0.7); } 100%{ transform: scale(1); opacity:1; } } .answerBox .option::before{content: '\25A3'; position: absolute; height:18px; width: 18px; right: 15px; top:8px; } .answerBox .option.already-answered{ pointer-events: none; } .answerBox .option.show-correct{ background-color: #11c466; border-color:#059e4c; color: #ffffff; animation: zoomIn 1.9s linear forwards; } .answerBox .option.show-correct::before{content:'\2714';} .answerBox .option.correct{ background-color: #11c466; border-color:#059e4c; color:#ffffff; opacity:1; animation: pulse 1s infinite; } @keyframes pulse{ 0%{ transform: scale(1); } 50%{ transform: scale(1.1); } 100%{ transform: scale(1); } } .answerBox .option.correct::before{ content: '\2714';} .answerBox .option.wrong{ background-color: #f85943; border-color:#d23723; color: #ffffff; opacity:1; animation: shake 1.7s infinite; } .answerBox .option.wrong::before{content:'\2573';} @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); } } .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; } .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; } .quiz-over-box{ text-align: center; display: none; } .quiz-over-box.show{ display: block; } .quiz-over-box h2{ font-size:20px; font-family: 'serif',cursive ; color: #f70b0b; margin:0px 3px 20px; padding:0;} .quiz-over-box h4{ font-size:25px; font-weight: normal; color: #0910f7; margin: 15px 0 20px; } .quiz-over-box h4 span{ font-weight: 800; color:#ff00ff; } .start-again-quiz-btn, .go-home-btn{ margin-top: 15px; } @media (max-width: 767px){.quizbox-3schools .qbtn{ padding: 10px 20px; font-size: 15px; } .quiz-box .question-box{ padding: 30px 5px; margin-top:10px; } .quiz-box .question-box .question-text{ font-size: 16px; } .quizbox-3schools{ padding:14px 10px 20px; } .quiz-box .setting-3schools .quiz-time {max-width: calc(50% - 40px); font-size: 18px; } .quiz-box .setting-3schools .score-board{ max-width: calc(50% - 40px); font-size: 18px; } .quiz-box .question-box .current-question-num{ height: 30px; width: 85px; line-height: 30px; top: -14px; margin-left: -35px; font-size: 16px; } .quiz-box .answerBox .option{ flex-basis: 100%; max-width: 100%; font-size: 16px; margin-top: 15px; } .quiz-over-box h1{ font-size: 20px; } .quiz-over-box h4{ font-size: 20px; margin: 10px 0 15px; } }
