CSS
:root {
--c1: #8b434e;
--c2: #bf8b93;
--c3: #eba1c1;
--c4: #efb9c4;
--c5: #f7d5dd;
--Display: none;
--BRadius: 10px;
--BShadowS: 0 0 0 1px;
--BShadowC1: var(--c5);
--BShadowC2: var(--c2);
--BShadowC3: var(--c1);
--BShadowC4: 0 0 2px 2px rgba(0, 0, 0, 0.8);
--Binset: inset;
--H1color: var(--c5);
--BgColor1: var(--c1);
--BgColor2: var(--c4);
--BtnHover: var(--c3);
--BtnHoCol: var(--c1);
--colorYE: #44ff00;
--colorYD: #248400;
--colorNo: #f45f77;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
font: 16px/1.5 "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
overflow-x: hidden;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAMAAADX9CSSAAAADFBMVEUAAAAAAAAAAAAAAAA16TeWAAAAA3RSTlMAVaoLuSc5AAAAd0lEQVR42p2QAQrDMAzEfLr//3ksjSAZY8AMNI7k9ornR4XC6hCsC5lJn3bhRukB4mE9PWHj6YP11LmLp3DNTY1U1BgjFQCNI4dIMv+W7/qx1N8ExcdOUoU72SAoGu/XvstcvBsHNtcbCedOI1a8+5wzZkEFX+sFNGcBHfqVhGgAAAAASUVORK5CYII="),
radial-gradient(
ellipse farthest-side at center center,
#822f5a 3%,
#5a0732 41%,
#000 100%
);
}
h1,
#seco,
#stat {
font-size: 1.5em;
text-align: center;
font-weight: 900;
color: var(--c4);
display: block;
letter-spacing: 0.1em;
text-shadow: 0 -1px 0 #eee, 0 1px 0 #333;
z-index: 2;
}
#seco,
#stat {
color: var(--c1);
margin: 0.5em;
max-width: 100px;
}
.stuf {
background: linear-gradient(to top, var(--c1) 0%, var(--c3) 100%);
}
@keyframes antianim {
0% {
background-position: 0 0;
}
100% {
background-position: 500px 1000px;
}
}
#wrap {
width: 100%;
min-height: -webkit-max-content;
min-height: -moz-max-content;
min-height: max-content;
display: block;
position: relative;
margin: 0 auto;
overflow-x: hidden;
height: 100%;
box-shadow: var(--BShadowS) var(--BShadowC1) var(--Binset),
var(--BShadowS) var(--BShadowC2) var(--Binset),
var(--BShadowS) var(--BShadowC3), var(--BShadowC4);
}
#wimg {
margin: 0 auto;
min-height: 30%;
position: relative;
overflow: hidden;
box-shadow: 0 0 0 1px #fff inset;
box-shadow: var(--BShadowS) var(--BShadowC1) var(--Binset),
var(--BShadowS) var(--BShadowC2) var(--Binset),
var(--BShadowS) var(--BShadowC3);
will-change: background-image;
image-rendering: crisp-edges;
background: linear-gradient(to top, var(--c1) 0%, var(--c3) 100%);
width: 100%;
display: flex;
justify-content: space-between;
}
#chip {
fill: #02d002 !important;
color: #104600;
}
#imag {
position: absolute;
bottom: 0;
overflow: hidden;
display: block;
min-height: 100%;
height: 100%;
width: 100%;
background-image: url("data:image/svg+xml,%3Csvg width='92.604mm' height='105.83mm' version='1.1' viewBox='0 0 92.604 105.83' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='chip' d='m25.886 7.7881e-4c-16.845 0.13018-32.668 16.548-22.878 26.515 59.887 0-3.3936 61.583 29.042 79.317h35.76c0.9475-1.1858-0.04524-2.5285-1.0727-3.4475-0.71948-0.65522-1.5249-1.2492-2.3373-1.8272 5.6894-22.464 3.5565-26.372 7.5658-24.622 2.0623 0.90068 5.1204 0.51172 6.8422-0.9467 1.3892-1.4963-0.35638-3.269-1.7275-4.3167-1.1061-0.92679-2.8808-1.4003-3.5343-2.594-1.288-2.3528-1.8011-5.3223-0.80133-7.7718 1.5961-3.9102 3.9936-6.4123 7.7118-9.1262 3.8024-2.7756 7.1358-2.1481 11.205-6.0495 2.7747-3.7133-1.2573-5.9538-3.2673-8.0837-3.5311-3.7416-14.022-6.7395-14.022-6.7395-0.82182-3.8942-4.9241-2.8911-5.4427 0.45396-4.3243-4.1815-8.6658-3.185-8.2872 2.2434 0.56482 2.1829-2.0211 8.9155-5.7812 12.552-5.1694 6.6425-11.446 12.141-16.632 18.811-1.6454 1.9896-3.0142 3.8596-4.1537 5.6269-0.99747 0.36557-1.2887 0.04843-0.40675-1.5068 3.8935-6.8659 29.297-41.243 9.7339-61.16-5.1964-5.2905-11.423-7.3746-17.515-7.3275zm49.208 36.16c0.70077-0.0042 1.4739 0.08918 2.2696 0.27464 6.1164 2.2537 3.0369 4.9386-1.2308 4.0038-4.0654-0.74682-5.1689-4.2217-1.0388-4.2785z' color='%23000000' fill='%23f7d5dd' stroke-width='.092389' style='text-indent:0;text-transform:none'/%3E%3C/svg%3E%0A");
background-size: contain;
background-position: center 10px;
background-repeat: no-repeat;
z-index: 1;
}
#imag img {
max-height: 100%;
max-width: 100%;
overflow: hidden;
margin: 0 auto;
position: relative;
display: block;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
image-rendering: crisp-edges;
}
#ques {
min-height: 1em;
background: var(--BtnHover);
text-align: center;
font-weight: 700;
color: var(--BtnHoCol);
position: absolute;
bottom: 0;
display: block;
width: 100%;
box-shadow: var(--BShadowS) var(--BShadowC1) var(--Binset),
var(--BShadowS) var(--BShadowC2) var(--Binset),
var(--BShadowS) var(--BShadowC3);
z-index: 1;
padding: 0 0.5em;
}
#main {
position: relative;
display: -ms-grid;
display: grid;
grid-template-columns: repeat(1, 1fr);
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 1em;
gap: 1em;
overflow: hidden;
}
#mess {
height: 240px;
width: 300px;
display: block;
position: absolute;
text-align: center;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-border-radius: var(--BRadius);
border-radius: var(--BRadius);
box-shadow: var(--BShadowS) var(--BShadowC1) var(--Binset),
var(--BShadowS) var(--BShadowC2) var(--Binset),
var(--BShadowS) var(--BShadowC3);
z-index: 9;
}
#star {
display: inline-block;
position: relative;
padding: 2em;
color: #eee;
font-weight: inherit;
}
#starBtn {
width: 10em;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-transform: uppercase;
}
.tips {
will-change: transform, background-color;
text-transform: uppercase;
}
.tips:before {
text-align: center;
position: absolute;
left: 0;
top: 0;
display: inline-block;
font-size: inherit;
padding: 1em;
border-radius: var(--BRadius);
box-sizing: border-box;
box-shadow: inherit;
}
.tips.sele.nno {
background-color: #ff724b;
}
.tips:not(.sele).yyes {
-webkit-animation: backgrnd 0.2s alternate infinite;
animation: backgrnd 0.2s alternate infinite;
}
.btn.tips.sele.yyes {
background-color: #d8f546;
}
@-webkit-keyframes backgrnd {
0% {
background-color: #003a00;
}
100% {
background-color: #d8f546;
}
}
@keyframes backgrnd {
0% {
background-color: #003a00;
}
100% {
background-color: #d8f546;
}
}
.tips:nth-of-type(odd).trans {
transform: translateX(-122%);
}
.tips:nth-of-type(even).trans {
transform: translateX(122%);
}
.tips:nth-of-type(1):before {
content: "A";
}
.tips:nth-of-type(2):before {
content: "B";
}
.tips:nth-of-type(3):before {
content: "C";
}
.tips:nth-of-type(4):before {
content: "D";
}
.tips:nth-of-type(5):before {
content: "E";
}
.tips:nth-of-type(6):before {
content: "F";
}
.tips:nth-of-type(7):before {
content: "G";
}
.tips:nth-of-type(8):before {
content: "H";
}
.tips:nth-of-type(1) {
transition: transform 1s linear 0.6s, 0.2s;
}
.tips:nth-of-type(2) {
transition: transform 1s linear 0.6s, 0.3s;
}
.tips:nth-of-type(3) {
transition: transform 1s linear 0.6s, 0.4s;
}
.tips:nth-of-type(4) {
transition: transform 1s linear 0.6s, 0.5s;
}
.tips:nth-of-type(5) {
transition: transform 1s linear 0.6s, 0.2s;
}
.tips:nth-of-type(6) {
transition: transform 1s linear 0.6s, 0.3s;
}
.tips:nth-of-type(7) {
transition: transform 1s linear 0.6s, 0.4s;
}
.tips:nth-of-type(8) {
transition: transform 1s linear 0.6s, 0.5s;
}
#mess.hide {
opacity: 0;
z-index: -1;
}
.btn {
color: var(--BtnHoCol);
background: var(--BtnHover);
font-weight: 900;
cursor: pointer;
position: relative;
display: inline-block;
box-shadow: var(--BShadowS) var(--BShadowC1) var(--Binset),
var(--BShadowS) var(--BShadowC2) var(--Binset),
var(--BShadowS) var(--BShadowC3);
-webkit-border-radius: var(--BRadius);
border-radius: var(--BRadius);
overflow: hidden;
padding: 1em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: none;
border: 0;
text-decoration: none;
text-shadow: 0px 1px 0px #eee;
}
.btn:hover:enabled,
.btn:focus:enabled {
background: linear-gradient(to top, var(--c1) 0%, var(--c3) 100%);
color: var(--c5);
text-shadow: 0px 1px 0px #333, 0px 1px 10px #fff;
}
.btn:focus {
outline: 0;
}
.btn:active:enabled {
transform: scale(0.99);
}
.btn::-moz-focus-inner {
border: 0;
}
.btn {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
@media screen and (min-width: 768px) {
#wrap {
width: 700px;
min-width: 450px;
}
#main {
grid-template-columns: repeat(2, 1fr);
}
}
JAVASCRIPT
(function() {
"use strict"; //ALL QUESTIONS arr
const questions = [
{
id: 1,
que: "IC chips used in computers are usually made of:",
yes: 1,
ch1: "Lead",
ch2: "Silicon",
ch3: "Chromium",
ch4: "Potato"
},
{
id: 2,
que: "WWW stands for ?",
yes: 0,
ch1: "World Wide Web",
ch2: "Chipmunk",
ch3: "Children",
ch4: "Wide World Web"
},
{
id: 3,
que: "If a computer has more than one processor then it is known as ?",
yes: 0,
ch1: "Multiprocessor",
ch2: "Silicon",
ch3: "Brouhaha",
ch4: "Doozy"
},
{
id: 4,
que: "Full form of URL is ?",
yes: 1,
ch1: "Multiprocessor",
ch2: "Uniform Resource Locator",
ch3: "Snollygoster",
ch4: "Uniform Registered Link"
},
{
id: 5,
que: "What is the Italian word for pie? ",
yes: 2,
ch1: "Comeuppance",
ch2: "Cakes",
ch3: "Pizza",
ch4: "Jazz"
},
{
id: 6,
que: "Which Russian town suffered an infamous nuclear disaster in 1986? ",
yes: 1,
ch1: "Donnybrook",
ch2: "Chernobyl",
ch3: "Pinocchio",
ch4: "Nincompoop"
},
{
id: 8,
que: "What do you see in this picture?",
img: "https://i.ibb.co/1f0hNdv/car1920x1080.png",
yes: 2,
ch1: "fish",
ch2: "direction",
ch3: "Car",
ch4: "umbrella",
ch5: "something",
ch6: "Interesting"
},
{
id: 9,
que: "Second generation of computers consist of which of following ?",
yes: 1,
ch1: "Speedy Gonzalez",
ch2: "Transistors",
ch3: "Vaccum Tubes",
ch4: "Diodes"
},
{
id: 10,
que: "MPG is an file extension of which type of files ?",
yes: 3,
ch1: "Image",
ch2: "Audio",
ch3: "Flash",
ch4: "Video"
}
];
let star;
let starBtn;
let getBody;
let getMainDiv;
let getImagDiv;
let getQuestio;
let transwer;
let score = 0;
let getMessage;
let question = 0;
let stat;
let seco;
let seconds = 30;
let tim = 0;
function CreateElem(e, className, id, text, src) {
if (!this instanceof CreateElem) return new CreateElem(e, className, id);
e = document.createElement(e);
if (id) e.id = id;
if (className) e.className = className;
if (text) e.innerText = text;
if (src) {
e.src = src;
e.setAttribute("alt", "img");
}
return e;
}
function remElements(elementId) {
let element = document.getElementById(elementId);
if (element) {
if (element.children.length) {
while (element.firstChild) {
element.removeChild(element.firstChild);
}
} else {
element.parentNode.removeChild(element);
}
}
return;
}
function inits() {
getBody = document.getElementsByTagName("body")[0]; //GET ELEMS <body>
getMainDiv = document.getElementById("main"); //GET ELEMS #main
getImagDiv = document.getElementById("imag"); //GET ELEMS #imag
getQuestio = document.getElementById("ques"); //GET ELEMS #ques
getMessage = document.getElementById("mess"); //GET ELEMS #mess
starBtn = document.getElementById("starBtn"); //GET ELEMS #starBtn
star = document.getElementById("star"); //GET ELEMS #star
stat = document.getElementById("stat"); //GET ELEMS #stat
seco = document.getElementById("seco");
getMainDiv.addEventListener("mouseup", loopElems);
}
function loded() {
getBody.className = "";
starBtn.innerHTML = "start";
starBtn.addEventListener("click", start);
[question, score] = [+readValue()[0], +readValue()[1]];
updateStat();
if (question > 0) starBtn.innerText = "continue";
}
function addQuestions(question) {
const { id, que, img, yes, ...rest } = questions[question]; //destructure variables
const answer = Object.keys(rest)[yes]; //the real answer variable
transwer = answer;
if (typeof img !== "undefined") {
let imgSrc;
if (img.indexOf("href") !== -1) {
imgSrc = "img/" + (img || "d.png");
} else {
imgSrc = img;
}
let im = new CreateElem("img", "img", "img", "", imgSrc);
getImagDiv.appendChild(im);
}
let qu = new CreateElem("span", "q", "q", que);
let lenthOfRes = Object.keys(rest).length;
let ans = [];
for (let i = 0; i < lenthOfRes; i++) {
ans.push(
new CreateElem(
"button",
"btn tips trans",
Object.keys(rest)[i],
rest[Object.keys(rest)[i]]
)
);
}
ans.map(el => getMainDiv.appendChild(el));
getQuestio.appendChild(qu);
}
function show() {
let elems = [...document.getElementsByClassName("tips")];
for (let i = elems.length - 1; i >= 0; i--) {
elems[i].classList.toggle("trans");
}
}
function updateStat() {
let va = question;
stat.innerText = va + 1 + "/" + questions.length;
}
function start() {
addQuestions(question);
setTimeout(show, 500);
hide.call(mess);
countdown();
updateStat();
}
function loopElems(elem) {
clearTimeout(tim);
if (!elem.target.classList.contains("tips")) return;
sele.call(elem.target);
const getAllansw = [...document.getElementsByClassName("tips")];
getAllansw.forEach(element => {
if (element.id !== transwer) {
nno.call(element);
} else {
yyes.call(element);
}
element.disabled = true;
element.style.pointerEvents = "none";
});
let elems = document.getElementById("id" + question);
if (elem.target.id === transwer) {
sele.bind(elems);
score++;
} else {
nno.bind(elems);
}
nextQuest();
}
function nextQuest() {
window.navigator.vibrate(30);
seconds = 30;
question++;
if (question < questions.length) createItem(question, score);
setTimeout(() => {
show();
setTimeout(() => {
remElements("img");
remElements("q");
remElements("main");
if (question === questions.length) {
question = 0;
star.innerText = "Your score: " + score + "/" + questions.length;
if (questions.length === score) {
star.innerText += "\nvictory";
starBtn.innerText = "Repeat";
} else {
starBtn.innerText = "Improve";
}
getMessage.classList.remove("hide");
score = 0;
createItem(question, score);
}
if (question > 0) start();
}, 0);
}, 1500);
}
function hide() {
this.classList.add("hide");
}
function sele() {
this.classList.add("sele");
}
function yyes() {
this.classList.add("yyes");
}
function nno() {
if (typeof this !== "undefined") {
this.classList.add("nno");
}
}
function createItem(q, s) {
if (storageAvailable("localStorage")) {
localStorage.setItem("valueOfWhoDaHelQuestion", q);
localStorage.setItem("valueOfWhoDaHelTrueAnsw", s);
} else console.log("No localstorage");
}
function readValue() {
if (storageAvailable("localStorage")) {
let x = localStorage.getItem("valueOfWhoDaHelQuestion");
let a = localStorage.getItem("valueOfWhoDaHelTrueAnsw");
return [x, a];
} else console.log("No localstorage");
}
function storageAvailable(type) {
try {
var storage = window[type],
x = "__storage_test__";
storage.setItem(x, x);
storage.removeItem(x);
return true;
} catch (e) {
return false;
}
}
function countdown() {
seco.innerText = seconds;
if (seconds-- > 0) {
tim = setTimeout(() => {
countdown();
}, 1000);
} else {
nextQuest();
clearTimeout(tim);
}
}
document.addEventListener("DOMContentLoaded", inits);
window.addEventListener("load", loded);
})();
