// DEFAULT QUIZZES
const DEFAULT_QUIZZES = [
{
id: "default-general",
title: "Kuis Pengetahuan Umum 🌍",
questions: [
{
question: "Apa nama ibu kota Indonesia saat ini?",
time: 20,
options: ["Surabaya", "Jakarta", "Bandung", "Medan"],
correct: 1
},
{
question: "Planet manakah yang dikenal sebagai Planet Merah?",
time: 15,
options: ["Venus", "Mars", "Yupiter", "Merkurius"],
correct: 1
},
{
question: "Berapakah hasil dari 12 x 12?",
time: 15,
options: ["144", "124", "134", "154"],
correct: 0
},
{
question: "Negara manakah yang menjuarai Piala Dunia FIFA 2022?",
time: 20,
options: ["Prancis", "Brasil", "Kroasia", "Argentina"],
correct: 3
}
]
},
{
id: "default-tech",
title: "Teknologi & Internet Keren 💻",
questions: [
{
question: "Siapakah pendiri utama Microsoft?",
time: 20,
options: ["Steve Jobs", "Mark Zuckerberg", "Bill Gates", "Jeff Bezos"],
correct: 2
},
{
question: "Apa kepanjangan dari WWW dalam alamat website?",
time: 15,
options: ["World Wide Web", "World Web Wide", "Web World Wide", "Wide World Web"],
correct: 0
},
{
question: "Bahasa pemrograman manakah yang paling sering digunakan untuk membuat halaman web interaktif di browser?",
time: 20,
options: ["Python", "C++", "Java", "JavaScript"],
correct: 3
}
]
}
];
// STATE MANAGEMENT
let customQuizzes = [];
let creatorQuestions = [];
// DOM ELEMENTS
const hostModal = document.getElementById("host-modal");
const creatorModal = document.getElementById("creator-modal");
const manageModal = document.getElementById("manage-modal");
const openCreatorBtn = document.getElementById("open-creator-btn");
const quickPlayBtn = document.getElementById("quick-play-btn");
const manageQuizzesBtn = document.getElementById("manage-quizzes-btn");
const hostCard = document.getElementById("host-card");
const joinCard = document.getElementById("join-card");
const closeHostModal = document.getElementById("close-host-modal");
const closeCreatorModal = document.getElementById("close-creator-modal");
const closeManageModal = document.getElementById("close-manage-modal");
const hostQuizList = document.getElementById("host-quiz-list");
const manageQuizList = document.getElementById("manage-quiz-list");
const questionsBuilderList = document.getElementById("questions-builder-list");
const addQuestionBtn = document.getElementById("add-question-btn");
const saveQuizBtn = document.getElementById("save-quiz-btn");
const quizCreatorForm = document.getElementById("quiz-creator-form");
// INIT FUNCTION
function init() {
// Load custom quizzes from localStorage
const saved = localStorage.getItem("qriosity_custom_quizzes");
if (saved) {
customQuizzes = JSON.parse(saved);
}
// Setup Event Listeners
setupEventListeners();
}
function setupEventListeners() {
// Modals opening
if (hostCard) {
hostCard.addEventListener("click", () => {
if (!openCreatorBtn) {
window.location.href = "/login";
return;
}
renderHostQuizList();
openModal(hostModal);
});
}
joinCard.addEventListener("click", () => {
window.location.href = "/player";
});
if (quickPlayBtn) {
quickPlayBtn.addEventListener("click", () => {
if (!openCreatorBtn) {
window.location.href = "/login";
return;
}
// Hosts default-general immediately
window.location.href = `/host?quizId=default-general`;
});
}
if (openCreatorBtn) {
openCreatorBtn.addEventListener("click", () => {
resetCreator();
addCreatorQuestion();
openModal(creatorModal);
});
}
if (manageQuizzesBtn) {
manageQuizzesBtn.addEventListener("click", () => {
renderManageQuizList();
openModal(manageModal);
});
}
// Modals closing
if (closeHostModal) closeHostModal.addEventListener("click", () => closeModal(hostModal));
if (closeCreatorModal) closeCreatorModal.addEventListener("click", () => closeModal(creatorModal));
if (closeManageModal) closeManageModal.addEventListener("click", () => closeModal(manageModal));
// Handle modal click outside to close
window.addEventListener("click", (e) => {
if (hostModal && e.target === hostModal) closeModal(hostModal);
if (creatorModal && e.target === creatorModal) closeModal(creatorModal);
if (manageModal && e.target === manageModal) closeModal(manageModal);
});
// Creator Actions
addQuestionBtn.addEventListener("click", () => addCreatorQuestion());
saveQuizBtn.addEventListener("click", saveQuiz);
}
// MODAL UTILITIES
function openModal(modal) {
modal.classList.add("active");
}
function closeModal(modal) {
modal.classList.remove("active");
}
// RENDER FUNCTIONS
function renderHostQuizList() {
hostQuizList.innerHTML = "";
// Render default quizzes
DEFAULT_QUIZZES.forEach(quiz => {
const el = createQuizItemDOM(quiz, false);
hostQuizList.appendChild(el);
});
// Render custom quizzes
customQuizzes.forEach(quiz => {
const el = createQuizItemDOM(quiz, false);
hostQuizList.appendChild(el);
});
if (DEFAULT_QUIZZES.length === 0 && customQuizzes.length === 0) {
hostQuizList.innerHTML = "Tidak ada kuis yang tersedia.
";
}
}
function renderManageQuizList() {
manageQuizList.innerHTML = "";
if (customQuizzes.length === 0) {
manageQuizList.innerHTML = "Belum ada kuis kustom. Buat kuis baru untuk mengelolanya di sini!
";
return;
}
customQuizzes.forEach(quiz => {
const el = createQuizItemDOM(quiz, true);
manageQuizList.appendChild(el);
});
}
function createQuizItemDOM(quiz, isManageMode = false) {
const item = document.createElement("div");
item.className = "quiz-item";
const info = document.createElement("div");
info.className = "quiz-info";
info.innerHTML = `
${escapeHTML(quiz.title)}
${quiz.questions.length} Pertanyaan • ${isManageMode ? 'Kustom' : 'Siap Dimainkan'}
`;
item.appendChild(info);
const actions = document.createElement("div");
actions.className = "quiz-actions";
if (isManageMode) {
const deleteBtn = document.createElement("button");
deleteBtn.className = "btn-outline";
deleteBtn.style.borderColor = "var(--color-red)";
deleteBtn.style.color = "var(--color-red)";
deleteBtn.innerText = "Hapus";
deleteBtn.onclick = () => deleteQuiz(quiz.id);
actions.appendChild(deleteBtn);
} else {
const playBtn = document.createElement("button");
playBtn.className = "btn-primary";
playBtn.innerText = "Host Game";
playBtn.onclick = () => {
window.location.href = `/host?quizId=${quiz.id}`;
};
actions.appendChild(playBtn);
}
item.appendChild(actions);
return item;
}
// QUIZ CREATOR LOGIC
function resetCreator() {
document.getElementById("quiz-title").value = "";
questionsBuilderList.innerHTML = "";
creatorQuestions = [];
}
function addCreatorQuestion() {
const index = creatorQuestions.length;
creatorQuestions.push({
question: "",
time: 20,
options: ["", "", "", ""],
correct: 0
});
const card = document.createElement("div");
card.className = "q-edit-card";
card.id = `q-card-${index}`;
card.innerHTML = `
Pertanyaan ${index + 1}
`;
questionsBuilderList.appendChild(card);
}
window.removeCreatorQuestion = function(index) {
if (creatorQuestions.length <= 1) {
alert("Kuis minimal harus memiliki 1 pertanyaan!");
return;
}
// Remove from state array
creatorQuestions.splice(index, 1);
// Re-render questions list to maintain indexing and elements properly
reRenderCreatorQuestions();
};
function reRenderCreatorQuestions() {
questionsBuilderList.innerHTML = "";
const currentData = [...creatorQuestions];
creatorQuestions = [];
currentData.forEach((q, i) => {
creatorQuestions.push(q);
const card = document.createElement("div");
card.className = "q-edit-card";
card.id = `q-card-${i}`;
card.innerHTML = `
Pertanyaan ${i + 1}
`;
questionsBuilderList.appendChild(card);
});
}
window.updateQuestionText = function(index, value) {
creatorQuestions[index].question = value;
};
window.updateQuestionTime = function(index, value) {
creatorQuestions[index].time = parseInt(value, 10);
};
window.updateQuestionOption = function(qIndex, optIndex, value) {
creatorQuestions[qIndex].options[optIndex] = value;
};
window.setCorrectOption = function(qIndex, optIndex) {
creatorQuestions[qIndex].correct = optIndex;
// Toggle visual correct class
for (let i = 0; i < 4; i++) {
const el = document.getElementById(`q-${qIndex}-opt-g-${i}`);
if (el) {
if (i === optIndex) {
el.classList.add("correct");
} else {
el.classList.remove("correct");
}
}
}
};
function saveQuiz() {
const title = document.getElementById("quiz-title").value.trim();
if (!title) {
alert("Judul kuis tidak boleh kosong!");
return;
}
// Validate form inputs using standard HTML5 validation
const inputs = quizCreatorForm.querySelectorAll("input[required]");
let isValid = true;
inputs.forEach(input => {
if (!input.value.trim()) {
isValid = false;
input.style.borderColor = "var(--color-red)";
} else {
input.style.borderColor = "var(--glass-border)";
}
});
if (!isValid) {
alert("Mohon isi semua pertanyaan dan pilihan jawaban!");
return;
}
const newQuiz = {
id: "custom-" + Date.now(),
title: title,
questions: creatorQuestions
};
customQuizzes.push(newQuiz);
localStorage.setItem("qriosity_custom_quizzes", JSON.stringify(customQuizzes));
alert("Kuis berhasil disimpan!");
closeModal(creatorModal);
}
function deleteQuiz(id) {
if (confirm("Apakah Anda yakin ingin menghapus kuis ini?")) {
customQuizzes = customQuizzes.filter(q => q.id !== id);
localStorage.setItem("qriosity_custom_quizzes", JSON.stringify(customQuizzes));
renderManageQuizList();
}
}
// HELPERS
function escapeHTML(str) {
return str.replace(/[&<>'"]/g,
tag => ({
'&': '&',
'<': '<',
'>': '>',
"'": ''',
'"': '"'
}[tag] || tag)
);
}
// RUN ON LOAD
document.addEventListener("DOMContentLoaded", init);