Compare commits
No commits in common. "dev" and "feat/leaderboard" have entirely different histories.
dev
...
feat/leade
11
coba.html
11
coba.html
@ -1,11 +0,0 @@
|
||||
<!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>
|
||||
<body>
|
||||
<h1>hai</h1>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 216 B |
Binary file not shown.
|
Before Width: | Height: | Size: 245 B |
Binary file not shown.
|
Before Width: | Height: | Size: 240 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 873 B |
Binary file not shown.
|
Before Width: | Height: | Size: 741 B |
Binary file not shown.
|
Before Width: | Height: | Size: 831 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
196
src/credit.html
196
src/credit.html
@ -1,196 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/global.css">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<style>
|
||||
:root {
|
||||
--height: 500px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<audio id="bgm-crdt" src="/assets/music/credit.mp3" autoplay></audio>
|
||||
<div class="container-credits" id="credits">
|
||||
<a class="back" href="onboard.php" data-aos="fade-in" data-aos-duration="3000">✖</a>
|
||||
<div class="credits">
|
||||
<div class="credits-inner" id="creditsInner">
|
||||
<div class="block">
|
||||
<h1>👾 codebeater 👾</h1>
|
||||
|
||||
<div class="role">lecturer Counselors</div>
|
||||
<div class="name">Bu Devi</div>
|
||||
<div class="name">Koh Andrew</div>
|
||||
|
||||
<div class="role">Development Team</div>
|
||||
<div class="name">Owen</div>
|
||||
<div class="name">Matthew Florentino</div>
|
||||
<div class="name">Carolus Bramantyo</div>
|
||||
<div class="name">Yohannes Marcel</div>
|
||||
|
||||
<div class="role">Frontend Developer</div>
|
||||
<div class="name">Yohannes Marcel</div>
|
||||
<div class="name">Matthew Florentino</div>
|
||||
<div class="name">Owen</div>
|
||||
|
||||
<div class="role">backend Developer</div>
|
||||
<div class="name">Carolus Bramantyo</div>
|
||||
<div class="name">Matthew Florentino</div>
|
||||
|
||||
<div class="role">Game Designers</div>
|
||||
<div class="name">Yohannes Marcel</div>
|
||||
|
||||
<div class="role">Assets Designers</div>
|
||||
<div class="name">Yohannes Marcel</div>
|
||||
|
||||
<div class="role">Questions Designers</div>
|
||||
<div class="name">Yohannes Marcel</div>
|
||||
<div class="name">Owen</div>
|
||||
|
||||
<div class="role">CSS Specialist</div>
|
||||
<div class="name">Matthew Florentino</div>
|
||||
|
||||
<div class="role">JS Specialist</div>
|
||||
<div class="name">Matthew Florentino</div>
|
||||
|
||||
<div class="role">PHP Specialist</div>
|
||||
<div class="name">Carolus Bramantyo</div>
|
||||
|
||||
<div class="role">SQL Specialist</div>
|
||||
<div class="name">Carolus Bramantyo</div>
|
||||
|
||||
<div class="role">Advicer</div>
|
||||
<div class="name">Rafael</div>
|
||||
<div class="name">Erlang</div>
|
||||
<div class="name">Bu Devi</div>
|
||||
<div class="name">koh Andrew</div>
|
||||
|
||||
<div class="role">Libary</div>
|
||||
<div class="name">Animate on Scroll</div>
|
||||
|
||||
<div class="role">Font</div>
|
||||
<div class="name">Jetbrains Mono</div>
|
||||
|
||||
<div class="role">Reference Game</div>
|
||||
<div class="name">Undertale</div>
|
||||
<div class="name">Soul Knight</div>
|
||||
<div class="name">Tomb of the Mask</div>
|
||||
|
||||
<div class="role">Reference Music</div>
|
||||
|
||||
|
||||
|
||||
<div style="height:40px;"></div>
|
||||
<div style="height:40px"></div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h1>👾 codebeater 👾</h1>
|
||||
|
||||
<div class="role">lecturer Counselors</div>
|
||||
<div class="name">Bu Devi</div>
|
||||
<div class="name">Koh Andrew</div>
|
||||
|
||||
<div class="role">Development Team</div>
|
||||
<div class="name">Owen</div>
|
||||
<div class="name">Matthew Florentino</div>
|
||||
<div class="name">Carolus Bramantyo</div>
|
||||
<div class="name">Yohannes Marcel</div>
|
||||
|
||||
<div class="role">Frontend Developer</div>
|
||||
<div class="name">Yohannes Marcel</div>
|
||||
<div class="name">Matthew Florentino</div>
|
||||
<div class="name">Owen</div>
|
||||
|
||||
<div class="role">backend Developer</div>
|
||||
<div class="name">Carolus Bramantyo</div>
|
||||
<div class="name">Matthew Florentino</div>
|
||||
|
||||
<div class="role">Game Designers</div>
|
||||
<div class="name">Yohannes Marcel</div>
|
||||
|
||||
<div class="role">Assets Designers</div>
|
||||
<div class="name">Yohannes Marcel</div>
|
||||
|
||||
<div class="role">Questions Designers</div>
|
||||
<div class="name">Yohannes Marcel</div>
|
||||
<div class="name">Owen</div>
|
||||
|
||||
<div class="role">CSS Specialist</div>
|
||||
<div class="name">Matthew Florentino</div>
|
||||
|
||||
<div class="role">JS Specialist</div>
|
||||
<div class="name">Matthew Florentino</div>
|
||||
|
||||
<div class="role">PHP Specialist</div>
|
||||
<div class="name">Carolus Bramantyo</div>
|
||||
|
||||
<div class="role">SQL Specialist</div>
|
||||
<div class="name">Carolus Bramantyo</div>
|
||||
|
||||
<div class="role">Advicer</div>
|
||||
<div class="name">Rafael</div>
|
||||
<div class="name">Erlang</div>
|
||||
<div class="name">Bu Devi</div>
|
||||
<div class="name">koh Andrew</div>
|
||||
|
||||
<div class="role">Libary</div>
|
||||
<div class="name">Animate on Scroll</div>
|
||||
|
||||
<div class="role">Font</div>
|
||||
<div class="name">Jetbrains Mono</div>
|
||||
|
||||
<div class="role">Reference Game</div>
|
||||
<div class="name">Undertale</div>
|
||||
<div class="name">Soul Knight</div>
|
||||
<div class="name">Tomb of the Mask</div>
|
||||
|
||||
<div class="role">Reference Music</div>
|
||||
|
||||
|
||||
|
||||
<div style="height:40px;"></div>
|
||||
<div style="height:40px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const bgm = document.getElementById("bgm-crdt");
|
||||
bgm.volume = 0.2;
|
||||
bgm.play()
|
||||
const inner = document.getElementById("creditsInner");
|
||||
let y = 0;
|
||||
let blockH = inner.scrollHeight / 2;
|
||||
const speed = 40;
|
||||
|
||||
function loop() {
|
||||
y -= speed / 60;
|
||||
if (y <= -blockH) y = 0;
|
||||
inner.style.transform = `translateY(${y}px)`;
|
||||
requestAnimationFrame(loop);
|
||||
}
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
blockH = inner.scrollHeight / 2;
|
||||
y = 0;
|
||||
});
|
||||
|
||||
loop();
|
||||
});
|
||||
</script>
|
||||
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||||
<script>
|
||||
AOS.init();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -7,6 +7,15 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container-third .anm {
|
||||
font-size: 100px;
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container-third .bg img {
|
||||
width: 100%;
|
||||
@ -64,57 +73,6 @@
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.container-first .content .boss .dmg {
|
||||
width: 600px;
|
||||
position: absolute;
|
||||
bottom: 100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
image-rendering: pixelated;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translateX(calc(-50% - 5px));
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(calc(-50% + 5px));
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateX(calc(-50% - 5px));
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-shake {
|
||||
animation: shake 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.container-first .hearts {
|
||||
position: absolute;
|
||||
top: 322px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
image-rendering: pixelated;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.container-first .hearts img {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.container-first .content .quiz {
|
||||
width: 1000px;
|
||||
height: 200px;
|
||||
@ -171,35 +129,3 @@
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.container-load {
|
||||
position: relative;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
|
||||
.container-load .bg {
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 100dvh;
|
||||
position: absolute;
|
||||
z-index: -999;
|
||||
}
|
||||
|
||||
.container-load .anm {
|
||||
font-size: 25px;
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container-load .hero {
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
image-rendering: pixelated;
|
||||
bottom: -5%;
|
||||
left: 5%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 999;
|
||||
}
|
||||
@ -8,8 +8,7 @@
|
||||
}
|
||||
|
||||
.container-login h1 {
|
||||
font-size: 130px;
|
||||
font-weight: 400;
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.container-login form {
|
||||
@ -19,16 +18,15 @@
|
||||
|
||||
.container-login form h2 {
|
||||
margin-bottom: 20px;
|
||||
font-size: 40px;
|
||||
font-size: 30px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.container-login form input {
|
||||
margin-bottom: 10px;
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
border-radius: 6px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
background-color: black;
|
||||
border: 1px solid white;
|
||||
@ -41,12 +39,20 @@
|
||||
|
||||
.container-login form button {
|
||||
border-radius: 6px;
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
margin-top: 40px;
|
||||
font-size: 30px
|
||||
}
|
||||
|
||||
.container-login form button:hover {
|
||||
border-radius: 6px;
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
margin-top: 40px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.container-login form p {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@ -70,8 +76,7 @@
|
||||
}
|
||||
|
||||
.container-register h1 {
|
||||
font-size: 120px;
|
||||
font-weight: 400;
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.container-register form {
|
||||
@ -80,17 +85,16 @@
|
||||
}
|
||||
|
||||
.container-register form h2 {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 30px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.container-register form input {
|
||||
margin-bottom: 10px;
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
border-radius: 6px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
background-color: black;
|
||||
border: 1px solid white;
|
||||
@ -103,12 +107,20 @@
|
||||
|
||||
.container-register form button {
|
||||
border-radius: 6px;
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
margin-top: 10px;
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
margin-top: 40px;
|
||||
font-size: 30px
|
||||
}
|
||||
|
||||
.container-register form button:hover {
|
||||
border-radius: 6px;
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
margin-top: 40px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.container-register form p {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@ -152,8 +164,7 @@
|
||||
image-rendering: pixelated;
|
||||
|
||||
/* >>> INI KUNCINYA: Atur opasitasnya di sini <<< */
|
||||
opacity: 1;
|
||||
/* Contoh nilai 40% transparan */
|
||||
opacity:1; /* Contoh nilai 40% transparan */
|
||||
|
||||
/* Pindahkan latar ini ke lapisan paling bawah */
|
||||
z-index: -1;
|
||||
@ -178,12 +189,14 @@
|
||||
width: 300px;
|
||||
image-rendering: pixelated;
|
||||
margin: 20px;
|
||||
margin-top: 160px;
|
||||
}
|
||||
|
||||
.container-board .menu {
|
||||
margin: 0 auto;
|
||||
border-radius: 6px;
|
||||
width: 400px;
|
||||
border: 5px solid;
|
||||
height: 40px;
|
||||
align-content: center;
|
||||
}
|
||||
@ -217,28 +230,13 @@ td {
|
||||
}
|
||||
|
||||
|
||||
.container-board .board table {
|
||||
background: #0b0e00f3;
|
||||
.container-board .board table tbody tr {
|
||||
background: #0b0e00bd;
|
||||
}
|
||||
|
||||
.container-board .board table tbody tr:hover {
|
||||
background: #c1fc0032;
|
||||
}
|
||||
|
||||
.container-board .back {
|
||||
color: #ffff009a;
|
||||
text-decoration: none;
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
z-index: 99999;
|
||||
left: 2%;
|
||||
top: 5%;
|
||||
}
|
||||
|
||||
.container-board .back:hover {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
.container-onboard {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@ -246,8 +244,6 @@ td {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-image: url(/assets/Design/landingPage.png);
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.container-onboard h1 {
|
||||
@ -280,74 +276,3 @@ td {
|
||||
border: 1px solid #dd85fa;
|
||||
background-color: #871b8323;
|
||||
}
|
||||
|
||||
.container-credits {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
background-image: url(/assets/Design/creditbg.png);
|
||||
margin: 0;
|
||||
background-position: center;
|
||||
background-size:cover ;
|
||||
}
|
||||
|
||||
.container-credits .credits {
|
||||
width: 100%;
|
||||
height: var(--height);
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
padding: 24px 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container-credits .credits .credits-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: translateY(0);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.container-credits .credits .credits-inner h1 {
|
||||
font-size: 150px;
|
||||
color: yellow;
|
||||
font-weight: 400;
|
||||
margin-bottom: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container-credits .credits .credits-inner .role {
|
||||
font-weight: 400;
|
||||
color: yellow;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
padding: 6px 0;
|
||||
font-size: 50px;
|
||||
line-height: 1.25;
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
|
||||
}
|
||||
|
||||
.container-credits .credits .credits-inner .name {
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
padding: 6px 0;
|
||||
font-size: 30px;
|
||||
line-height: 1.25;
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
|
||||
}
|
||||
|
||||
.container-credits .back {
|
||||
color: #ffff009a;
|
||||
text-decoration: none;
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
z-index: 99999;
|
||||
left: 2%;
|
||||
top: 5%;
|
||||
}
|
||||
|
||||
.container-credits .back:hover {
|
||||
color: yellow;
|
||||
}
|
||||
@ -1,52 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>firstperson</title>
|
||||
<link rel="stylesheet" href="/css/global.css">
|
||||
<link rel="stylesheet" href="/css/game.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<audio id="bgm" src="/assets/music/game.mp3" loop autoplay></audio>
|
||||
<audio id="sfx" src="/assets/music/slash.mp3"></audio>
|
||||
<audio id="sfxhrt" src="/assets/music/hurt.mp3"></audio>
|
||||
<div class="container-first">
|
||||
<div class="content">
|
||||
<div class="boss">
|
||||
<img id="boss" src="/assets/Design/PYTHON-BOSSFIGHTMODEFINALt.gif" alt="">
|
||||
<img id="dmg" class="dmg" src="/assets/Design/damageeffectNEWSLASH.gif"/>
|
||||
</div>
|
||||
<div class="hearts" id="hrt">
|
||||
<img id="h1" src="/assets/Design/Heartfull.png">
|
||||
<img id="h2" src="/assets/Design/Heartfull.png">
|
||||
<img id="h3" src="/assets/Design/Heartfull.png">
|
||||
</div>
|
||||
<div class="quiz">
|
||||
<h2 id="question"></h2>
|
||||
<h2 id="question">Question Goes Here ......... !!</h2>
|
||||
<div id="btn-answer">
|
||||
<button class="btn"></button>
|
||||
<button class="btn"></button>
|
||||
<button class="btn"></button>
|
||||
<button class="btn"></button>
|
||||
<button class="btn">text</button>
|
||||
<button class="btn">text</button>
|
||||
<button class="btn">text</button>
|
||||
<button class="btn">text</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="/js/firstperson.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const bgm = document.getElementById("bgm");
|
||||
bgm.volume = 0.1;
|
||||
bgm.loop(true)
|
||||
bgm.play()
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,18 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Loading ...</title>
|
||||
<link rel="stylesheet" href="/css/global.css">
|
||||
<link rel="stylesheet" href="/css/game.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-load">
|
||||
<p id="wellcome-message" class="anm" ><span style="color: yellow; font-size: 40px;">Welcome to the Python Quiz!</span><br>You’ll face multiple-choice questions designed to test your logic and Python skills. <br>Let’s see how well you can outsmart the code!</p>
|
||||
<img id="hero" class="hero" src="/assets/Design/KNIGHTPIXLETPP.gif" alt="">
|
||||
<img class="bg" src="/assets/Design/LOADSCREEN.gif" alt="">
|
||||
</div>
|
||||
<script src="/js/load.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -10,6 +10,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-third">
|
||||
<h1 id="wellcome-message" class="anm" >PYTHON QUIZ GAME</h1>
|
||||
<div class="bg">
|
||||
<img src="/assets/Design/wayland.png" alt="bg">
|
||||
</div>
|
||||
|
||||
@ -6,25 +6,12 @@ const answerBtn = document.getElementById("btn-answer")
|
||||
let currentQuestionIndex = 0;
|
||||
let score = 0;
|
||||
|
||||
let wrongCount = 0;
|
||||
let maxWrong = 3;
|
||||
|
||||
function shuffle(array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
function startQuiz(){
|
||||
currentQuestionIndex = 0;
|
||||
score = 0;
|
||||
shuffle(questions);
|
||||
showQuestion();
|
||||
}
|
||||
|
||||
|
||||
function showQuestion(){
|
||||
resetState();
|
||||
let currentQuestion = questions[currentQuestionIndex]
|
||||
@ -46,80 +33,27 @@ function resetState(){
|
||||
}
|
||||
}
|
||||
|
||||
function updateHearts(){
|
||||
const hearts = [
|
||||
document.getElementById("h1"),
|
||||
document.getElementById("h2"),
|
||||
document.getElementById("h3")
|
||||
];
|
||||
|
||||
hearts.forEach((h, i) => {
|
||||
if(i < wrongCount){
|
||||
h.src = "/assets/Design/HeartEmpty.png";
|
||||
} else {
|
||||
h.src = "/assets/Design/Heartfull.png";
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function dmg(){
|
||||
const dmg = document.getElementById("dmg");
|
||||
|
||||
dmg.style.display = "block";
|
||||
|
||||
setTimeout(() => {
|
||||
dmg.style.display = "none";
|
||||
}, 450);
|
||||
}
|
||||
|
||||
function shake(el){
|
||||
el.classList.remove("animate-shake");
|
||||
void el.offsetWidth;
|
||||
el.classList.add("animate-shake");
|
||||
|
||||
el.addEventListener("animationend", () => {
|
||||
el.classList.remove("animate-shake");
|
||||
}, { once: true });
|
||||
}
|
||||
|
||||
|
||||
function selectAnswer(e){
|
||||
const selectedBtn = e.target;
|
||||
const isCorrect = selectedBtn.dataset.correct === "true";
|
||||
if(isCorrect){
|
||||
selectedBtn.classList.add("correct");
|
||||
score += 10;
|
||||
shake(document.getElementById("boss"))
|
||||
dmg();
|
||||
const bgm = document.getElementById("sfx");
|
||||
bgm.play()
|
||||
} else {
|
||||
selectedBtn.classList.add("Incorrect");
|
||||
wrongCount ++;
|
||||
shake(document.getElementById("hrt"))
|
||||
updateHearts();
|
||||
const bgm = document.getElementById("sfxhrt");
|
||||
bgm.play()
|
||||
|
||||
if(wrongCount >= maxWrong){
|
||||
setTimeout(()=>{
|
||||
showScore();
|
||||
}, 500);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
Array.from(answerBtn.children).forEach(button => {
|
||||
if(button.dataset.correct === "true") button.classList.add("correct");
|
||||
button.disabled = true;
|
||||
});
|
||||
setTimeout(nextQuestion, 500)
|
||||
},
|
||||
setTimeout(nextQuestion, 1000)
|
||||
);
|
||||
}
|
||||
|
||||
function showScore(){
|
||||
resetState();
|
||||
const show = questionElement.innerHTML = `you scored ${score} out of 200 !`;
|
||||
const show = questionElement.innerHTML = `you scored ${score} out of ${questions.length}!`;
|
||||
postScore(score);
|
||||
}
|
||||
|
||||
@ -151,13 +85,9 @@ function postScore(score){
|
||||
console.log("Server response:", data);
|
||||
|
||||
if(data.success || data.message === "Score accumulated") {
|
||||
setTimeout(() => {
|
||||
window.location.href = "../leaderboard.php";
|
||||
}, 3000);
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
window.location.href = "../leaderboard.php";
|
||||
}, 3000);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
setTimeout(()=> {
|
||||
window.location.href = "/game/firstperson.html"
|
||||
}, 5000)
|
||||
153
src/js/soal.js
153
src/js/soal.js
@ -26,157 +26,4 @@ export const questions = [
|
||||
{text: "0", correct: true},
|
||||
]
|
||||
},
|
||||
{
|
||||
question: "How do you start a comment in Python code ?",
|
||||
answers: [
|
||||
{text: "// This is a comment", correct: true},
|
||||
{text: "/* This is a comment */", correct: false},
|
||||
{text: "`this is comment`", correct: false},
|
||||
{text: "# This is a comment", correct: false},
|
||||
]
|
||||
},
|
||||
{
|
||||
question: "What is the result of the following operation ? (print('5'+'5'))",
|
||||
answers: [
|
||||
{text: "10", correct: false},
|
||||
{text: "55", correct: true},
|
||||
{text: "error", correct: false},
|
||||
{text: "NaN", correct: false},
|
||||
]
|
||||
},
|
||||
{
|
||||
question: "Correct string format ?",
|
||||
answers: [
|
||||
{text: "'bahlil'", correct: true},
|
||||
{text: "(bahlil)", correct: false},
|
||||
{text: "[bahlil]", correct: false},
|
||||
{text: "{bahlil}", correct: false},
|
||||
]
|
||||
},
|
||||
{
|
||||
question: "Correct loop syntax ?",
|
||||
answers: [
|
||||
{text: "for i in range(5):", correct: true},
|
||||
{text: "loop 5 time", correct: false},
|
||||
{text: "foreach i in 5", correct: false},
|
||||
{text: "repeat", correct: false},
|
||||
]
|
||||
},
|
||||
{
|
||||
question: "Function to get user input ?",
|
||||
answers: [
|
||||
{text: "scan()", correct: false},
|
||||
{text: "input()", correct: true},
|
||||
{text: "error", correct: false},
|
||||
{text: "get()", correct: false},
|
||||
]
|
||||
},
|
||||
{
|
||||
question: "Convert integer to string ?",
|
||||
answers: [
|
||||
{text: "text(5)", correct: false},
|
||||
{text: "toStr(5)", correct: false},
|
||||
{text: "str(5)", correct: true},
|
||||
{text: "char(5)", correct: false},
|
||||
]
|
||||
},
|
||||
{
|
||||
question: "Stop a loop ?",
|
||||
answers: [
|
||||
{text: "break", correct: true},
|
||||
{text: "stop", correct: false},
|
||||
{text: "exit", correct: false},
|
||||
{text: "kill", correct: false},
|
||||
]
|
||||
},
|
||||
{
|
||||
question: "Symbol for tuples?",
|
||||
answers: [
|
||||
{text: "[ ]", correct: false},
|
||||
{text: "{ }", correct: false},
|
||||
{text: "( )", correct: true},
|
||||
{text: "< >", correct: false},
|
||||
]
|
||||
},
|
||||
{
|
||||
question: "Output of int(3.9) ?",
|
||||
answers: [
|
||||
{text: "4", correct: false},
|
||||
{text: "3,9", correct: false},
|
||||
{text: "3", correct: true},
|
||||
{text: "tiga koma sembilan", correct: false},
|
||||
]
|
||||
},
|
||||
{
|
||||
question: "Find max number ?",
|
||||
answers: [
|
||||
{text: "top()", correct: false},
|
||||
{text: "max()", correct: true},
|
||||
{text: "high()", correct: false},
|
||||
{text: "largest()", correct: false},
|
||||
]
|
||||
},
|
||||
{
|
||||
question: '(3 * "A") output ?',
|
||||
answers: [
|
||||
{text: "error", correct: false},
|
||||
{text: "none", correct: false},
|
||||
{text: "AAA", correct: true},
|
||||
{text: "A3A", correct: false},
|
||||
]
|
||||
},
|
||||
{
|
||||
question: "Logical OR operator ?",
|
||||
answers: [
|
||||
{text: "||", correct: false},
|
||||
{text: "%%", correct: false},
|
||||
{text: "or", correct: true},
|
||||
{text: "&&", correct: false},
|
||||
]
|
||||
},
|
||||
{
|
||||
question: "result of not True ?",
|
||||
answers: [
|
||||
{text: "true", correct: false},
|
||||
{text: "false", correct: true},
|
||||
{text: "null", correct: false},
|
||||
{text: "0", correct: false},
|
||||
]
|
||||
},
|
||||
{
|
||||
question: "Check if item exists ?",
|
||||
answers: [
|
||||
{text: "exists", correct: false},
|
||||
{text: "inside", correct: false},
|
||||
{text: "in", correct: true},
|
||||
{text: "has", correct: false},
|
||||
]
|
||||
},
|
||||
{
|
||||
question: "x += 1 means?",
|
||||
answers: [
|
||||
{text: "x = 1", correct: false},
|
||||
{text: "x = x + 1", correct: true},
|
||||
{text: "x = x - 1", correct: false},
|
||||
{text: "idk", correct: false},
|
||||
]
|
||||
},
|
||||
{
|
||||
question: "Define a class ?",
|
||||
answers: [
|
||||
{text: "struct", correct: false},
|
||||
{text: "object", correct: false},
|
||||
{text: "type", correct: false},
|
||||
{text: "class", correct: true},
|
||||
]
|
||||
},
|
||||
{
|
||||
question: "how much data type in python ?",
|
||||
answers: [
|
||||
{text: "5", correct: true},
|
||||
{text: "1", correct: false},
|
||||
{text: "2", correct: false},
|
||||
{text: "100", correct: false},
|
||||
]
|
||||
},
|
||||
];
|
||||
@ -1,18 +1,39 @@
|
||||
const txt = document.getElementById('wellcome-message');
|
||||
const hero = document.getElementById('hero');
|
||||
const boss = document.getElementById('boss');
|
||||
|
||||
boss.style.transition = '2s cubic-bezier(0.4, 0, 0.2, 1)';
|
||||
hero.style.transition = '2s cubic-bezier(0.4, 0, 0.2, 1)';
|
||||
txt.style.transition = 'opacity .6s cubic-bezier(0.4, 0, 0.2, 1)';
|
||||
txt.style.opacity = '0';
|
||||
txt.style.display = 'block';
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
hero.style.left = '1000px';
|
||||
txt.style.opacity = '1';
|
||||
}, 1000);
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
txt.style.opacity = '0';
|
||||
|
||||
setTimeout(() => {
|
||||
txt.style.display = 'none';
|
||||
}, 400);
|
||||
}, 5000);
|
||||
|
||||
setTimeout(() => {
|
||||
hero.style.left = '800px';
|
||||
}, 500);
|
||||
setTimeout(()=> {
|
||||
hero.src = "/assets/Design/KnightPixLE2-exporgift.gif";
|
||||
}, 1700);
|
||||
setTimeout(() => {
|
||||
boss.style.right = '700px';
|
||||
}, 500);
|
||||
|
||||
setTimeout(()=> {
|
||||
window.location.href = "/game/loading.html"
|
||||
}, 3000)
|
||||
window.location.href = "/game/firstperson.html"
|
||||
}, 5500)
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
<?php
|
||||
|
||||
use LDAP\Result;
|
||||
|
||||
session_start();
|
||||
require_once "config/db.php";
|
||||
|
||||
@ -42,12 +45,13 @@ if($result){
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<audio id="bgm" src="/assets/music/leaderboard.mp3" loop autoplay></audio>
|
||||
<div class="container-board">
|
||||
<a class="back" href="onboard.php" data-aos="fade-in" data-aos-duration="3000">✖</a>
|
||||
<div class="chara">
|
||||
<div class="menu">
|
||||
<h1 style="text-align: center;"><?php echo $nama; ?></h1>
|
||||
</div>
|
||||
<h1 style="text-align: center;"> <?php echo $score; ?> </h1>
|
||||
<div class="character">
|
||||
<h1 style="text-align: center; padding-right: 45px; color: yellow;">Knight</h1>
|
||||
<img src="/assets/Design/KnightPixLE2-exporgift.gif" alt="knight">
|
||||
</div>
|
||||
</div>
|
||||
@ -83,33 +87,20 @@ if($result){
|
||||
?>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<?php
|
||||
$peringkat = 1;
|
||||
|
||||
?>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><?php echo $realrank; ?></td>
|
||||
<td><?php echo $nama; ?></td>
|
||||
<td><?php echo $score; ?> PTS</td>
|
||||
<table >
|
||||
<tbody >
|
||||
<tr >
|
||||
<td style="color: gold; font-weight: bold; border: 5px solid #bbd000;;" ><?php echo $realrank; ?></td>
|
||||
<td style="color: gold; font-weight: bold; border: 5px solid #bbd000;;"><?php echo $nama; ?></td>
|
||||
|
||||
<td style="color: gold; font-weight: bold; border: 5px solid #bbd000;;"><?php echo $score; ?> PTS</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const bgm = document.getElementById("bgm");
|
||||
bgm.loop = true
|
||||
bgm.volume = 0.2
|
||||
bgm.play()
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -14,8 +14,6 @@ session_start();
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<audio id="bgm" src="/assets/music/onboard.mp3" loop autoplay></audio>
|
||||
<audio id="hover-sfx" src="/assets/music/hover.mp3" ></audio>
|
||||
<div class="container-onboard">
|
||||
<?php include 'notif.php'; ?>
|
||||
<?php
|
||||
@ -26,47 +24,16 @@ session_start();
|
||||
?>
|
||||
<h1 data-aos="zoom-out" data-aos-duration="1000">👾 codebeater 👾</h1>
|
||||
<div class="menu">
|
||||
<a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="game/thirdperson.html">Game Start</a>
|
||||
<a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="leaderboard.php">leaderboard</a>
|
||||
<a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="credit.html">Credit</a>
|
||||
<a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="logout.php">Exit</a>
|
||||
<a data-aos="zoom-out" data-aos-duration="2000" href="game/thirdperson.html">Game Start</a>
|
||||
<a data-aos="zoom-out" data-aos-duration="2000" href="leaderboard.php">leaderboard</a>
|
||||
<a data-aos="zoom-out" data-aos-duration="2000" href="">Credit</a>
|
||||
<a data-aos="zoom-out" data-aos-duration="2000" href="logout.php">Exit</a>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||||
<script>
|
||||
AOS.init();
|
||||
</script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const bgm = document.getElementById("bgm");
|
||||
const hoversfx = document.getElementById('hover-sfx');
|
||||
const buttons = document.querySelectorAll('.hover-btn');
|
||||
|
||||
bgm.volume =0.2;
|
||||
hoversfx.volume =0.2;
|
||||
buttons.forEach(button => {
|
||||
button.addEventListener('mouseenter', () => {
|
||||
hoversfx.currentTime = 0;
|
||||
hoversfx.play().catch(error => console.log('menunggu iteraksi user'))
|
||||
});
|
||||
});
|
||||
function playBGM(){
|
||||
bgm.play().then(()=>{
|
||||
console.log('BGM Berputar')
|
||||
}).catch(error => {
|
||||
console.log('auto diblok')
|
||||
});
|
||||
}
|
||||
playBGM();
|
||||
|
||||
|
||||
document.body.addEventListener("click", () => {
|
||||
if (bgm.paused) {
|
||||
bgm.play();
|
||||
}
|
||||
}, { once: true });
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user