fix: notif and first person

This commit is contained in:
chocomett 2025-12-15 18:45:27 +07:00
parent 5800f4057b
commit 550cfea087
5 changed files with 45 additions and 16 deletions

View File

@ -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;

View File

@ -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>

View File

@ -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
View 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);
}

View File

@ -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>