codebeater - Beta Launch #10
@ -142,6 +142,17 @@
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.container-first #scoreAlert {
|
||||
margin-bottom: 30px;
|
||||
padding: 10px;
|
||||
color: #ffdf12;
|
||||
font-size: 40px;
|
||||
bottom: 40px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.container-first .content .quiz #btn-answer {
|
||||
color: #ffdf12;
|
||||
display: flex;
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
<img id="h2" src="/assets/Design/Heartfull.png">
|
||||
<img id="h3" src="/assets/Design/Heartfull.png">
|
||||
</div>
|
||||
<div class="quiz">
|
||||
<div class="quiz" id="border">
|
||||
<h2 id="question"></h2>
|
||||
<div id="btn-answer">
|
||||
<button class="btn"></button>
|
||||
@ -35,6 +35,7 @@
|
||||
<button class="btn"></button>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="scoreAlert"></h2>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="/js/firstperson.js"></script>
|
||||
|
||||
@ -2,6 +2,7 @@ import { questions } from "./soal.js";
|
||||
|
||||
const questionElement = document.getElementById("question")
|
||||
const answerBtn = document.getElementById("btn-answer")
|
||||
const answerBorder = document.getElementById("border")
|
||||
|
||||
let currentQuestionIndex = 0;
|
||||
let score = 0;
|
||||
@ -119,7 +120,16 @@ function selectAnswer(e){
|
||||
|
||||
function showScore(){
|
||||
resetState();
|
||||
const show = questionElement.innerHTML = `you scored ${score} out of 200 !`;
|
||||
answerBorder.remove();
|
||||
document.getElementById("h1").remove();
|
||||
document.getElementById("h2").remove();
|
||||
document.getElementById("h3").remove();
|
||||
setTimeout(()=> {
|
||||
const bgm = document.getElementById("sfxhrt");
|
||||
bgm.play()
|
||||
const alerts = document.getElementById("scoreAlert")
|
||||
alerts.textContent = `you scored ${score} out of 200 !`;
|
||||
}, 600);
|
||||
postScore(score);
|
||||
}
|
||||
|
||||
|
||||
9
src/js/notif.js
Normal file
9
src/js/notif.js
Normal file
@ -0,0 +1,9 @@
|
||||
function showNotif(msg) {
|
||||
const n = document.getElementById("notif");
|
||||
n.textContent = msg;
|
||||
n.classList.add("show");
|
||||
|
||||
setTimeout(() => {
|
||||
n.classList.remove("show");
|
||||
}, 3000);
|
||||
}
|
||||
@ -1,5 +1,10 @@
|
||||
<div id="notif" class="notif"></div>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<style>
|
||||
.notif {
|
||||
position: fixed;
|
||||
@ -26,15 +31,8 @@
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function showNotif(msg) {
|
||||
const n = document.getElementById("notif");
|
||||
n.textContent = msg;
|
||||
n.classList.add("show");
|
||||
|
||||
setTimeout(() => {
|
||||
n.classList.remove("show");
|
||||
}, 3000);
|
||||
}
|
||||
</script>
|
||||
<body>
|
||||
<div id="notif" class="notif"></div>
|
||||
<script src="/js/notif.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user