diff --git a/README.md b/README.md new file mode 100644 index 0000000..c6babec --- /dev/null +++ b/README.md @@ -0,0 +1,5 @@ +#View + +This app is used by quiz media to reduce the work of Time keeper, Panel of judges and other Judging personels in quiz + +The candidates will choose question while the projecting unit will display the question picked on the screen, the question will be displyed for some seconds before it close. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..8eabf35 --- /dev/null +++ b/index.html @@ -0,0 +1,56 @@ + + + + + + + + + QUiz + + + +
+
+ + +
+
+
ORAL
+
FILL IN THE GAP
+
QUOTE
+
+
+
+

Instructions

+
    +
  1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    2. +
  2. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    3. +
  3. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    4. +
  4. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    5. +
  5. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    6. +
  6. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    7. +
  7. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    8. +
  8. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    9. +
+
+
+
+
+
+
+ +
+

+

+ + +
+
+
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..7b92bc9 --- /dev/null +++ b/script.js @@ -0,0 +1,622 @@ +const preview = document.getElementById('pre') +let back = document.querySelector('.icon') + +const questions = [ + { + num: 1, + que: 'lorem God fuje feufhe fuef efuehf ef he eue eurre reur tr trtyer teytr tyrt ytr trtyr trytr etryt rtyret rtyr tyrthr tr trhgdfog dytgor tr hter ', + }, + { + num: 2, + que: 'em God fuje feufhe fuef efuehf ef', + }, + { + num: 3, + que: 'lorem Gode feufhe fuef efuehf ef', + }, + { + num: 4, + que: 'lorem Gouje feufhe fuef efuehf ef', + }, + { + num: 5, + que: 'fkgfglorem God fuje feufhe fuef efuehf ef', + }, + { + num: 6, + que: 'ejfelorem God fuje feufhe fuef efuehf ef', + }, + { + num: 7, + que: 'florem God fuje feufhe fuef efuehf ef', + }, + { + num: 8, + que: 'llllllorem God fuje feufhe fuef efuehf ef', + }, + { + num: 9, + que: 'lorem God fuje feufhe fuef efuehf efdkjdfudhfdf', + }, + { + num: 10, + que: 'ldforem God fuje feufhe fuef efuehf ef', + }, + { + num: 11, + que: 'ldfdfrem God fuje feufhe fuef efuehf ef', + }, + { + num: 12, + que: 'lddfdf God fuje feufhe fuef efuehf ef', + }, + { + num: 13, + que: 'loremdg God fuje feufhe fuef efuehf ef', + }, + { + num: 14, + que: 'loretertem God fuje feufhe fuef efuehf ef', + }, + { + num: 15, + que: 'lorem God fuje feufhe fuefdwdewewe efuehf ef', + }, + { + num: 16, + que: 'lorem Gsdsdod fuje feufhe fuef efuehf ef', + }, + { + num: 17, + que: 'lorem God fuje feufhe fuefwew efuehf ef', + }, + { + num: 18, + que: 'lorem God fuje feufhsdasde fuef efuehf ef', + }, + { + num: 19, + que: 'lorem God fuje feufhuiyuiu65e fuef efuehf ef', + }, + { + num: 20, + que: 'poiorpwerlorem God fuje feufhe fuef efuehf ef', + }, + { + num: 21, + que: 'lwdweorem God fuje feufhe fuef efuehf ef', + }, + { + num: 22, + que: 'lorem God fuje feimuyiyiutu ufhe fuef efuehf ef', + }, + { + num: 23, + que: 'loefwererrewfdrem God fuje feufhe fuef efuehf ef', + }, + { + num: 24, + que: 'loferttrrem God fuje feufhe fuef efuehf ef', + }, + { + num: 25, + que: 'lfweretertorem God fuje feufhe fuef efuehf ef', + }, + { + num: 26, + que: 'lfwerrtorem God fuje feufhe fuef efuehf ef', + }, + { + num: 27, + que: 'lyh67t676965orem God fuje feufhe fuef efuehf ef', + }, + { + num: 28, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 29, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 30, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 31, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 32, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 33, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 34, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 35, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 36, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 37, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 38, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 39, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 40, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 41, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 42, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 43, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 44, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 45, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 46, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 47, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 48, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 49, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 50, + que: 'lorem God fuje feufhe fuef efuehf efjghv yrfg', + }, +] + +const questions2 = [ + { + num: 1, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 2, + que: 'em God fuje feufhe fuef efuehf ef', + }, + { + num: 3, + que: 'lorem Gode feufhe fuef efuehf ef', + }, + { + num: 4, + que: 'lorem Gouje feufhe fuef efuehf ef', + }, + { + num: 5, + que: 'fkgfglorem God fuje feufhe fuef efuehf ef', + }, + { + num: 6, + que: 'ejfelorem God fuje feufhe fuef efuehf ef', + }, + { + num: 7, + que: 'florem God fuje feufhe fuef efuehf ef', + }, + { + num: 8, + que: 'llllllorem God fuje feufhe fuef efuehf ef', + }, + { + num: 9, + que: 'lorem God fuje feufhe fuef efuehf efdkjdfudhfdf', + }, + { + num: 10, + que: 'ldforem God fuje feufhe fuef efuehf ef', + }, + { + num: 11, + que: 'ldfdfrem God fuje feufhe fuef efuehf ef', + }, + { + num: 12, + que: 'lddfdf God fuje feufhe fuef efuehf ef', + }, + { + num: 13, + que: 'loremdg God fuje feufhe fuef efuehf ef', + }, + { + num: 14, + que: 'loretertem God fuje feufhe fuef efuehf ef', + }, + { + num: 15, + que: 'lorem God fuje feufhe fuefdwdewewe efuehf ef', + }, + { + num: 16, + que: 'lorem Gsdsdod fuje feufhe fuef efuehf ef', + }, + { + num: 17, + que: 'lorem God fuje feufhe fuefwew efuehf ef', + }, + { + num: 18, + que: 'lorem God fuje feufhsdasde fuef efuehf ef', + }, + { + num: 19, + que: 'lorem God fuje feufhuiyuiu65e fuef efuehf ef', + }, + { + num: 20, + que: 'poiorpwerlorem God fuje feufhe fuef efuehf ef', + }, + { + num: 21, + que: 'lwdweorem God fuje feufhe fuef efuehf ef', + }, + { + num: 22, + que: 'lorem God fuje feimuyiyiutu ufhe fuef efuehf ef', + }, + { + num: 23, + que: 'loefwererrewfdrem God fuje feufhe fuef efuehf ef', + }, + { + num: 24, + que: 'loferttrrem God fuje feufhe fuef efuehf ef', + }, + { + num: 25, + que: 'lfweretertorem God fuje feufhe fuef efuehf ef', + }, + { + num: 26, + que: 'lfwerrtorem God fuje feufhe fuef efuehf ef', + }, + { + num: 27, + que: 'lyh67t676965orem God fuje feufhe fuef efuehf ef', + }, + { + num: 28, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 29, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 30, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, +] + +const questions3 = [ + { + num: 1, + que: 'lorem God fuje feufhe fuef efuehf ef', + }, + { + num: 2, + que: 'em God fuje feufhe fuef efuehf ef', + }, + { + num: 3, + que: 'lorem Gode feufhe fuef efuehf ef', + }, + { + num: 4, + que: 'lorem Gouje feufhe fuef efuehf ef', + }, + { + num: 5, + que: 'fkgfglorem God fuje feufhe fuef efuehf ef', + }, + { + num: 6, + que: 'ejfelorem God fuje feufhe fuef efuehf ef', + }, + { + num: 7, + que: 'florem God fuje feufhe fuef efuehf ef', + }, + { + num: 8, + que: 'llllllorem God fuje feufhe fuef efuehf ef', + }, + { + num: 9, + que: 'lorem God fuje feufhe fuef efuehf efdkjdfudhfdf', + }, + { + num: 10, + que: 'ldforem God fuje feufhe fuef efuehf ef', + }, + { + num: 11, + que: 'ldfdfrem God fuje feufhe fuef efuehf ef', + }, + { + num: 12, + que: 'lddfdf God fuje feufhe fuef efuehf ef', + }, + { + num: 13, + que: 'loremdg God fuje feufhe fuef efuehf ef', + }, + { + num: 14, + que: 'loretertem God fuje feufhe fuef efuehf ef', + }, + { + num: 15, + que: 'lorem God fuje feufhe fuefdwdewewe efuehf ef', + }, + { + num: 16, + que: 'lorem Gsdsdod fuje feufhe fuef efuehf ef', + }, + { + num: 17, + que: 'lorem God fuje feufhe fuefwew efuehf ef', + }, + { + num: 18, + que: 'lorem God fuje feufhsdasde fuef efuehf ef', + }, + { + num: 19, + que: 'lorem God fuje feufhuiyuiu65e fuef efuehf ef', + }, + { + num: 20, + que: 'poiorpwerlorem God fuje feufhe fuef efuehf ef', + }, + { + num: 21, + que: 'lwdweorem God fuje feufhe fuef efuehf ef', + }, + { + num: 22, + que: 'lorem God fuje feimuyiyiutu ufhe fuef efuehf ef', + }, + { + num: 23, + que: 'loefwererrewfdrem God fuje feufhe fuef efuehf ef', + }, + { + num: 24, + que: 'loferttrrem God fuje feufhe fuef efuehf ef', + }, + { + num: 25, + que: 'lfweretertorem God fuje feufhe fuef efuehf ef', + }, + +] + +const oral = document.querySelector('.oral') +const fill = document.querySelector('.fil') +const quote = document.querySelector('.quot') +let contque = document.getElementById('contque') +const topic = document.getElementById('nnn') +const text = document.getElementById('text') +let y = 51 +let x = 26 +let z = 31 +let currentQuiz = 0 +let currentNum = 20 + + + +const num = document.getElementById('ques') +const num2 = document.getElementById('fill') +const num3 = document.getElementById('quote') + + +const note = document.querySelector('.notice') +const pop = document.getElementById('icon') +pop.addEventListener('click', () => { + num.classList.remove('show') + num2.classList.remove('show') + num3.classList.remove('show') + note.classList.add('note') + oral.classList.remove('active') + fill.classList.remove('active') + quote.classList.remove('active') +}) +oral.addEventListener('click', () => { + oral.classList.add('active') + fill.classList.remove('active') + quote.classList.remove('active') + + + if (oral.classList.contains('active')) { + num.classList.add('show') + num2.classList.remove('show') + num3.classList.remove('show') + note.classList.remove('note') + } +}) +fill.addEventListener('click', () => { + oral.classList.remove('active') + fill.classList.add('active') + quote.classList.remove('active') + + if (fill.classList.contains('active')) { + num2.classList.add('show') + num.classList.remove('show') + num3.classList.remove('show') + note.classList.remove('note') + } +}) +quote.addEventListener('click', () => { + oral.classList.remove('active') + fill.classList.remove('active') + quote.classList.add('active') + + if (quote.classList.contains('active')) { + num3.classList.add('show') + num2.classList.remove('show') + num.classList.remove('show') + note.classList.remove('note') + } +}) + +let time = document.querySelector('.time') + +function pre() { + preview.style.transform = 'translateX(100%)' + time.classList.remove('anim') +} + +for (let i = 1; i < y; i++) { + + const box = document.createElement('span') + box.classList.add('span') + box.innerText = i + num.appendChild(box) + + + + box.addEventListener('click', () => { + + preview.style.transform = 'translateX(0)' + let time = document.querySelector('.time') + topic.innerHTML = `Question number ${box.innerText} ` + + questions.forEach(q => { + text.innerHTML = questions[`${box.innerText - 1}`].que + + }) + if (box.style.background === 'red') { + text.innerHTML ='Question already answered' + } + box.style.background = 'red' + time.classList.add('anim') + + + let timeout = setTimeout( pre, 15000); + + back.addEventListener('click', () => { + + clearTimeout(timeout) + }) + + }) + +} + +back.addEventListener('click', () => { + preview.style.transform = 'translateX(100%)' + time.classList.remove('anim') +}) + + +for (let i = 1; i < z; i++) { + + const box2 = document.createElement('span') + box2.classList.add('span') + box2.innerText = i + num2.appendChild(box2) + + + + + box2.addEventListener('click', () => { + preview.style.transform = 'translateX(0)' + let tt = document.querySelector('.time') + topic.innerHTML = `Question number ${box2.innerText} ` + + questions2.forEach(q => { + text.innerHTML = questions2[`${box2.innerText - 1}`].que + + // tt.classList.add('anim') + }) + if (box2.style.background === 'red') { + text.innerHTML ='Question already answered' + } + box2.style.background = 'red' + + time.classList.add('anim') + + + let timeout = setTimeout( pre, 15000); + + back.addEventListener('click', () => { + + clearTimeout(timeout) + }) + }) + + +} + +for (let i = 1; i < x; i++) { + + const box3 = document.createElement('span') + box3.classList.add('span') + box3.innerText = i + num3.appendChild(box3) + + box3.addEventListener('click', () => { + preview.style.transform = 'translateX(0)' + let tt = document.querySelector('.time') + topic.innerHTML = `Question number ${box3.innerText} ` + + questions3.forEach(q => { + text.innerHTML = questions3[`${box3.innerText - 1}`].que + + // tt.classList.add('anim') + }) + if (box3.style.background === 'red') { + text.innerHTML ='Question already answered' + } + box3.style.background = 'red' + time.classList.add('anim') + + let timeout = setTimeout( pre, 15000); + + back.addEventListener('click', () => { + clearTimeout(timeout) + }) + }) + +} + diff --git a/style.css b/style.css new file mode 100644 index 0000000..d3f08a7 --- /dev/null +++ b/style.css @@ -0,0 +1,310 @@ +* { + box-sizing: border-box; + +} +body { + margin: 0; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + position: relative; + max-width: 100%; +} +.container { + display: grid; + grid-template-columns: 25% 75%; + grid-template-rows: 25% 75%; + gap: 20px; + height: 100vh; + max-width: 100%; + overflow: hidden; + padding: 0; + position: relative; + background: #eee; +} +.nav { + box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); + grid-area: 1 / 1 / 1 / 3; + position: relative; + + +} + +.nav i { + position: absolute; + right: 0; + margin: 30px; + padding: 15px 17px; + font-size: 1.5rem; + background: rgb(75, 2, 148); + color: #fff; + border-radius: 50%; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + -ms-border-radius: 50%; + -o-border-radius: 50%; + animation: popping 1s ease-in alternate infinite; + -webkit-animation: popping 0.5s ease-in alternate infinite; +} +@keyframes popping { + from { + transform: scale(90%); + -webkit-transform: scale(90%); + -moz-transform: scale(90%); + -ms-transform: scale(90%); + -o-transform: scale(90%); +} + to { + transform: scale(100%); + -webkit-transform: scale(100%); + -moz-transform: scale(100%); + -ms-transform: scale(100%); + -o-transform: scale(100%); +} +} +.right { + box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 30px; + padding: 50px; + background: #fff; + +} + + +.right .active { + background: rgb(26, 1, 51); +} +.right .active:hover { + background: rgb(26, 1, 51); +} + +.right > div { + background: rgb(75, 2, 148); + width: 100%; + color: #fff; + text-transform: capitalize; + padding: 15px 25px; + cursor: pointer; + border-radius: 30px; + -webkit-border-radius: 30px; + -moz-border-radius: 30px; + -ms-border-radius: 30px; + -o-border-radius: 30px; + transition: 0.2s ease-in-out; + -webkit-transition: 0.2s ease-in-out; + -moz-transition: 0.2s ease-in-out; + -ms-transition: 0.2s ease-in-out; + -o-transition: 0.2s ease-in-out; +} + +.right > div:hover { + background: rebeccapurple; +} +.cont-que { + box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); + background: #fff; + position: relative; + max-width: 100%; + object-fit: cover; +} +.ques, .fill, .quote { + display: grid; + grid-template-columns: auto auto auto auto auto auto auto auto auto auto; + gap: 20px; + padding: 30px 50px; + position: absolute; + max-width: 100%; + max-height: 100%; + align-items: flex-start; + object-fit: cover; + opacity: 0; + background: #fff; + visibility: hidden; +} +.notice { + position: absolute; + width: 100%; + height: 100%; + background: #fff; + text-align: center; + visibility: hidden; + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 50px; +} + +.notice h2 { + font-size: 30px; +} +.notice ol li { + font-size: 20px; + margin: 5px; +} +.notice.note { + /* z-index: 5; */ + visibility: visible; + transition: 0.3s ease-in-out; + -webkit-transition: 0.3s ease-in-out; + -moz-transition: 0.3s ease-in-out; + -ms-transition: 0.3s ease-in-out; + -o-transition: 0.3s ease-in-out; +} +.show { + opacity: 1; + transition: 0.2s ease-in-out; + -webkit-transition: 0.2s ease-in-out; + -moz-transition: 0.2s ease-in-out; + -ms-transition: 0.2s ease-in-out; + -o-transition: 0.2s ease-in-out; + visibility: visible; +} +.span { + background: rgb(75, 2, 148); + padding: 20px; + text-align: center; + display: grid; + place-items: center; + color: #fff; + font-size: 20px; + border-radius: 10px; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + -o-border-radius: 10px; + cursor: pointer; + max-height: 100%; + position: relative; + transition: 0.5s ease-in-out; + -webkit-transition: 0.5s ease-in-out; + -moz-transition: 0.5s ease-in-out; + -ms-transition: 0.5s ease-in-out; + -o-transition: 0.5s ease-in-out; +} + + +.span:hover { + background: rgb(148, 87, 209); +} +.dis { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + background: #fff; + transform: translateX(100%); + -webkit-transform: translateX(100%); + -moz-transform: translateX(100%); + -ms-transform: translateX(100%); + -o-transform: translateX(100%); + transition: 0.3s ease-in-out; + -webkit-transition: 0.3s ease-in-out; + -moz-transition: 0.3s ease-in-out; + -ms-transition: 0.3s ease-in-out; + -o-transition: 0.3s ease-in-out; + z-index: 100; +} + +.dis i { + font-size: 2rem; + padding: 5px; + margin: 20px; + color: #eee; + background: #111; + border-radius: 50%; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + -ms-border-radius: 50%; + -o-border-radius: 50%; + position: absolute; + top: 0; + left: 0; +} + +.dis .text { + width: 60%; + height: 70%; + border: 2px solid rebeccapurple; + border-radius: 50px; + -webkit-border-radius: 50px; + -moz-border-radius: 50px; + -ms-border-radius: 50px; + -o-border-radius: 50px; + display: flex; + padding: 40px; + text-align: center; + align-items: center; + justify-content: flex-start; + flex-direction: column; + position: relative; + overflow: hidden; +} + +.dis .text p { + font-size: 30px; +} + +.dis .time { + position: absolute; + width: 100%; + background: red; + height: 5px; + bottom: 0; + margin: 10px; + transform-origin: left; +} + + +.anim { + transition: 15s linear; + -webkit-transition: 15s linear; + -moz-transition: 15s linear; + -ms-transition: 15s linear; + -o-transition: 15s linear; + transform: scaleX(0); + -webkit-transform: scaleX(0); + -moz-transform: scaleX(0); + -ms-transform: scaleX(0); + -o-transform: scaleX(0); +} + + + + + + +@media (max-width:999px) { + .container { + display: none; + } + body::before { + content: 'SORRY!!! This Page is only available on PC '; + height: 100vh; + width: 100%; + color: #111; + font-size: 30px; + z-index: 50; + position: absolute; + display: flex; + align-items: center; + justify-content: center; + padding: 50px; + text-align: center; + } +} + +@media (max-width:1150px) { + .span { + padding: 15px; + } + .ques, .fill, .quote { + padding: 30px; + } + .right { + padding: 30px; + } +} \ No newline at end of file