Scribd
Upload
11 views

!doctype HTML

The document contains code for a web page that displays a table with multiple choice questions. Each question has a number, title, and description. Users can click a "START" button next to each question to view the question details and prompt for input. Their input is then displayed in an output section below using their name. The page uses HTML, CSS, and JavaScript to build the user interface and handle user interactions.

Uploaded by

melati.surya.ningsih29
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views

!doctype HTML

The document contains code for a web page that displays a table with multiple choice questions. Each question has a number, title, and description. Users can click a "START" button next to each question to view the question details and prompt for input. Their input is then displayed in an output section below using their name. The page uses HTML, CSS, and JavaScript to build the user interface and handle user interactions.

Uploaded by

melati.surya.ningsih29
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TugasJavaKila</title>
<link rel="icon" type="image/x-icon" href="SAKHILA NETWORK.jpg">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}

body {
display: flex;
background-color: #7ec4cf;
}

table {
width: 100%;
border-collapse: collapse;
margin: 20px;
}

th, td {
border: 1px solid #d1cfe2;
padding: 8px;
text-align: left;
}

.judul {
font-weight: bold;
font-size: 20px;
margin-bottom: 15px;
}

button {
display: block;
margin: 20px 0;
padding: 20px 50px;
border-radius: 10px;
border: 2px solid brown;
background-color: #d1cfe2;
color: peru;
font-weight: bold;
font-size: 16px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.4);
transition: all .3s ease;
}

.botton:active {
transform: scale(0.95);
}

button:hover {
border: 2px solid powderblue;
background-color: white;
color: brown;
}

.display h1 {
margin-bottom: 20px;
}

.display div {
border: none;
width: 100%;
height: 100%;
}

.display div button {


display: inline-block;
margin: 25px;
}
</style>
</head>

<body>
<table>
<thead>
<tr>
<th>Nomor</th>
<th>Judul</th>
<th>Kasus</th>
</tr>
</thead>
<tbody id="tabelSoal">

</tbody>
</table>

<div class="display">
<h1></h1>
<p></p>
</div>

<script>
let name = "Mahasiswa";
let h1 = document.querySelector(".display h1");
let p = document.querySelector(".display p");

let tabelSoal = document.getElementById("tabelSoal");

let soal = [
{ nomor: 1, judul: "Input dan Output", kasus: "Anda diminta untuk
membuat program sederhana yang meminta nama pengguna dan menampilkan pesan sambutan
menggunakan nama tersebut" },
// Tambahkan objek soal lainnya
// ...
];

soal.forEach((item, index) => {


let row = tabelSoal.insertRow();
let cell1 = row.insertCell(0);
let cell2 = row.insertCell(1);
let cell3 = row.insertCell(2);

cell1.innerHTML = item.nomor;
cell2.innerHTML = item.judul;
cell3.innerHTML = item.kasus;

let button = document.createElement("button");


button.textContent = "START";
button.addEventListener("click", function () {
name = prompt("Masukkan Nama");
h1.innerHTML = item.judul;
p.innerHTML = `Welcome <b>${name}</b><br> Welcome To Program
JavaScript SakhilaAgustina`;
});

row.appendChild(button);
});
</script>
</body>

</html>

You might also like