Skip to content

Commit d4a3a12

Browse files
harfialpharabyharfialpharaby
committed
tambah instruction dan buat button instruction jadi responsive
1 parent fec25da commit d4a3a12

6 files changed

+330
-207
lines changed

‎img/instruction.gif

127 KB
Loading

‎img/lose-state.gif

654 KB
Loading

‎img/win-state.gif

321 KB
Loading

‎index.html

+62-2
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,74 @@
1111
</head>
1212

1313
<body class="bg-dark" style="overflow: hidden;">
14-
1514
<div class="container">
16-
<img src="img/mouse-arrow.png" alt="mouse-arrow" style="width: 7%;" id="mouse">
15+
<!-- <div class="logo-instruction">
16+
<img src="img/mouse-arrow.png" alt="mouse-arrow" style="width: 7%;" id="mouse">
17+
</div> -->
18+
<button type="button" class="btn-radius instruction" onclick="show();">?</button>
1719
<span class="text-light bg-dark title">MATEMACLICK</span>
1820
<button type="button" class="arrow-button" onclick="location.href='game.html';">
1921
<span>Start</span>
2022
</button>
2123
</div>
24+
25+
<!-- The Modal -->
26+
<div id="insModal" class="modal" style="padding: 1%;">
27+
<!-- Modal content -->
28+
<div class="modal-content">
29+
<!-- <div class="modal-header">
30+
<h5 class="text-primary text-center">INSTRUCTION</h5>
31+
</div> -->
32+
<div class="modal-body">
33+
<img src="img/instruction.gif" alt="game-instruction" class="w-100">
34+
35+
<p class="text-center font-weight-bolder text-primary" style="margin: 2% auto;">
36+
Pilih operator aritmatika yang sesuai untuk menghasilkan angka yang diminta pada soal
37+
</p>
38+
39+
<!-- <div class="flex-container">
40+
<div class="ins-win-state">
41+
<img src="img/win-state.gif" alt="win-state-gif" class="w-100">
42+
<p class="text-center">
43+
Jawaban benar akan menaikkan level dan tingkat kesulitan
44+
</p>
45+
</div>
46+
47+
<div class="ins-lose-state">
48+
<img src="img/lose-state.gif" alt="lose-state-gif" class="w-100">
49+
<p class="text-center ins-lose-state">
50+
Jawaban salah akan mengembalikan ke halaman awal permainan
51+
</p>
52+
</div>
53+
</div> -->
54+
55+
<table style="margin-bottom: 5%;">
56+
<tr>
57+
<td valign="top">
58+
<img src="img/win-state.gif" alt="win-state-gif" class="w-100">
59+
<p class="text-center ins-win-state">
60+
Jawaban benar akan menaikkan level dan tingkat kesulitan
61+
</p>
62+
</td>
63+
<td valign="top">
64+
<img src="img/lose-state.gif" alt="lose-state-gif" class="w-100">
65+
<p class="text-center ins-lose-state">
66+
Jawaban salah akan mengembalikan ke halaman awal permainan
67+
</p>
68+
</td>
69+
</tr>
70+
</table>
71+
72+
<!-- note -->
73+
<p class="text-secondary font-italic font-weight-light text-center">
74+
Tap Anywhere to Continue
75+
</p>
76+
</div>
77+
</div>
78+
</div>
79+
80+
<!-- javascript modal instruction -->
81+
<script src="instruction.js"></script>
2282
</body>
2383

2484
</html>

‎instruction.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
function show() {
2+
// Get the modal
3+
let modal = document.getElementById("insModal");
4+
5+
// open the modal
6+
modal.style.display = "block";
7+
8+
// close modal when user clicks on it
9+
modal.onclick = function () {
10+
modal.style.display = "none";
11+
}
12+
13+
// When the user clicks anywhere outside of the modal, close it
14+
window.onclick = function (event) {
15+
if (event.target == modal && modal.style.display === 'block') {
16+
modal.style.display = "none";
17+
}
18+
}
19+
}

0 commit comments

Comments
 (0)