<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="template soal interaktif">
<meta name="keywords" content="soalinformatika, dampaksosialinformatika, ujian">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><h1>Soal interaktif</h1></title>
<style>
body {
font-family: calibri, Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 100%;
margin: 0 auto;
padding: 20px;
color:#656261;
}
.question {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
margin-top: 10px;
color :#35195B;
}
input[type="radio"]
-ms-transform: scale(1.8); /* Untu IE */
-webkit-transform: scale(1.8); /* untuk Chrome, Mozilla,Safari, Opera */
transform: scale(1.8);
}
input[type="checkbox"] {
-ms-transform: scale(1.8); /* Untu IE */
-webkit-transform: scale(1.8); /* untuk Chrome, Mozilla,Safari, Opera */
transform: scale(1.8);
}
.answers {
margin-bottom: 20px;
font-size: 18px;
}
label {
display: block;
margin-bottom: 10px;
}
.box{
background-color:#FCF184;
max-width: 98%;
box-shadow: 3px 3px 5px -1px rgba(44, 0, 0, 0.54);
padding:10px;
}
button {
display: block;
margin-top: 20px;
padding: 10px 10px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
p {
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<!--<h1>Judul Soal</h1>-->
<table>
<tr><td><label for="username">Nama lengkap </label><td> : <input type="text" id="username" name="username" placeholder="Tuliskan nama"></td></tr>
<tr><td><label for="kelas">Kelas </label><td> : <input type="text" id="kelas" name="kelas" placeholder="Misalnya 7A"></td></tr>
<tr><td><label for="absen">No. Absen </label><td> : <input type="text" id="absen" name="absen" placeholder="Misalnya 05"></td></tr>
</table>
<!--<div>
<label for="username">Tulis namamu:</label>
<input type="text" id="username" name="username" placeholder="Tuliskan nama">
</div>-->
<div><B><u><font color="#C50000">Petunjuk !</font></u></b></div><br>
<ol>
<li>Jawablah seluruh soal dengan benar</li>
<li>Untuk pilihan jawaban dengan lingkaran cukup memilih salah satu jawaban yang paling tepat. Sedangkan untuk pilihan jawaban yang kotak centang dapat memilih lebih dari satu jawaban</li>
</ol><hr>
<div id="quiz"></div><hr>
<center><button id="submit">Kirim</button><br>
<div id="result"></div></center>
</div>
<script>
// Fungsi untuk mengacak array
function shuffleArray(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]];
}
}
// Fungsi untuk mengacak soal dan jawaban
function shuffleQuizData() {
shuffleArray(quizData);
quizData.forEach(question => {
shuffleArray(question.answers);
shuffleArray(question.correctAnswers);
});
}
//soal pilihan ganda
const quizData = [
{
type: 'multipleChoice',
question: '
Soal multiple choice.',
answers: ['
jawaban1', 'jawaban2', 'jawaban3', 'jawaban 4'],
correctAnswers: ['
jawaban2']
},
//soal pilihan ganda
{
type: 'complexMultipleChoice',
question: '
Soal pilihan ganda kompleks',
answers: ['
jawaban1', 'jawaban2', 'jawaban3', 'jawaban4'],
correctAnswers: ['
jawaban1', 'jawaban2', 'jawaban4']
},
// Tambahkan soal disini sesuai kebutuhan dengan menyalin template diatasnya
];
const quizContainer = document.getElementById('quiz');
const resultContainer = document.getElementById('result');
const submitButton = document.getElementById('submit');
const usernameInput = document.getElementById('username');
const kelasInput = document.getElementById('kelas');
const absenInput = document.getElementById('absen');
function generateQuiz() {
const output = [];
quizData.forEach((question, index) => {
let answers = '';
if (question.type === 'multipleChoice') {
answers = question.answers.map(answer => `
<label>
<input type="radio" name="question${index}" value="${answer}">
${answer}
</label>
`).join('');
} else if (question.type === 'complexMultipleChoice') {
answers = question.answers.map(answer =>
`
<label>
<input type="checkbox" name="question${index}" value="${answer}">
${answer}
</label>
`).join('');
}
output.push(
`<div class="question">${question.question}</div>
<div class="answers">${answers}</div>`
);
});
quizContainer.innerHTML = output.join('');
}
function calculateScore() {
let score = 0;
quizData.forEach((question, index) => {
const selectedAnswers = document.querySelectorAll(`input[name=question${index}]:checked`);
const correctAnswers = question.correctAnswers;
if (question.type === 'multipleChoice') {
if (selectedAnswers.length === 1 && selectedAnswers[0].value === correctAnswers[0]) {
score++;
}
} else if (question.type === 'complexMultipleChoice') {
if (selectedAnswers.length === correctAnswers.length) {
let allCorrect = true;
selectedAnswers.forEach(selectedAnswer => {
if (!correctAnswers.includes(selectedAnswer.value)) {
allCorrect = false;
}
});
if (allCorrect) {
score++;
}
}
}
});
return score;
}
function showResult() {
const username = usernameInput.value.trim();
if (!username) {
alert('Silahkan isi data Nama dengan benar !');
return;
}
const kelas = kelasInput.value.trim();
if (!kelas) {
alert('Silahkan isi data kelas dengan benar !');
return;
}
const absen = absenInput.value.trim();
if (!absen) {
alert('Silahkan isi data no absen dengan benar !');
return;
}
const totalQuestions = quizData.length;
const correctAnswers = calculateScore();
const score = (correctAnswers / totalQuestions) * 100;
resultContainer.innerHTML = `<div class='box'><table><tr><td>Nama </td><td>:<b> ${username}</b></td></tr><tr><td>Kelas </td><td>: ${kelas}</td></tr><tr><td>No. Absen </td><td>: ${absen}</td></tr><tr><td>Skor Anda</td><td>: <font color='red'><b>${score.toFixed(2)}</b></font></td></tr><tr><td>Jumlah soal </td><td>: ${totalQuestions}</td><tr><td>Jawab benar </td><td>: ${correctAnswers} </td></tr><tr><td>Jawab salah </td><td>: ${totalQuestions-correctAnswers}</td></tr></table></div>`;
}
submitButton.addEventListener('click', showResult);
// Panggil fungsi shuffleQuizData() sebelum memanggil generateQuiz()
shuffleQuizData();
generateQuiz();
</script>
</body>
<!--mohon tidak menghapus bagian footer tanpa seizin pembuat aplikasi-->
<footer><center><a href="https://youtube.com/@tutorial-Ku">Copyright soal @ Karyadi</a></center></footer>
</html>
