alvanizimut215/index.html

## index.html
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kuis Kimia</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Kuis Kimia</h1>
    <div id="quiz-box">

  <div id="question">Memuat soal...</div>
      <div id="options"></div>
      <div id="feedback"></div>
      <button id="nextBtn">Soal Berikutnya</button>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

## script.js
const questions = [
  {
    question: "Apa simbol kimia untuk unsur Oksigen?",
    options: ["O", "Ox", "Og", "O₂"],
    answer: "O"
  },
  {
    question: "Unsur dengan nomor atom 1 adalah?",
    options: ["Helium", "Hidrogen", "Oksigen", "Litium"],
    answer: "Hidrogen"
  },
  {
    question: "Zat yang biasa digunakan untuk menyimpan energi listrik pada baterai adalah?",
    options: ["Tembaga", "Natrium", "Litium", "Timah"],
    answer: "Litium"
  },
  {
    question: "Simbol kimia dari Besi adalah?",
    options: ["Fe", "B", "Be", "Ir"],
    answer: "Fe"
  }
];

let current = 0;

const questionEl = document.getElementById('question');
const optionsEl = document.getElementById('options');
const feedbackEl = document.getElementById('feedback');
const nextBtn = document.getElementById('nextBtn');

function loadQuestion() {
  feedbackEl.textContent = '';
  nextBtn.style.display = 'none';

  const q = questions[current];
  questionEl.textContent = q.question;
  optionsEl.innerHTML = '';

  q.options.forEach(option => {
    const btn = document.createElement('div');
    btn.className = 'option';
    btn.textContent = option;
    btn.onclick = () => checkAnswer(option);
    optionsEl.appendChild(btn);
  });
}

function checkAnswer(selected) {
  const correct = questions[current].answer;
  feedbackEl.textContent = selected === correct ? "✅ Benar!" : `❌ Salah! Jawaban: ${correct}`;
  nextBtn.style.display = 'inline-block';
}

nextBtn.onclick = () => {
  current = (current + 1) % questions.length;
  loadQuestion();
};

loadQuestion();

## soal-kimia-dasar.markdown

      
    Raw
  

              soal-kimia-dasar.markdown
            
          
    soal kimia dasar

A Pen by alvaniz nizvana on CodePen.
License.

  
## style.css
body {
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(to right, #6dd5ed, #2193b0);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  background: #ffffff10;
  backdrop-filter: blur(10px);
  padding: 30px;
  border-radius: 15px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
}

#question {
  font-size: 1.3rem;
  margin-bottom: 20px;
}

.option {
  display: block;
  background: #ffffff20;
  border: 1px solid #ffffff30;
  padding: 10px;
  margin: 10px auto;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.2s;
}

.option:hover {
  background: #ffffff30;
}

#feedback {
  margin-top: 15px;
  font-weight: bold;
}

#nextBtn {
  margin-top: 20px;
  padding: 10px 20px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  background: #ffffff33;
  color: #fff;
  cursor: pointer;
}

#nextBtn:hover {
  background: #ffffff55;
}
	<!DOCTYPE html>
	<html lang="id">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Kuis Kimia</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div class="container">
	<h1>Kuis Kimia</h1>
	<div id="quiz-box">

	<div id="question">Memuat soal...</div>
	<div id="options"></div>
	<div id="feedback"></div>
	<button id="nextBtn">Soal Berikutnya</button>
	</div>
	</div>

	<script src="script.js"></script>
	</body>
	</html>
	const questions = [
	{
	question: "Apa simbol kimia untuk unsur Oksigen?",
	options: ["O", "Ox", "Og", "O₂"],
	answer: "O"
	},
	{
	question: "Unsur dengan nomor atom 1 adalah?",
	options: ["Helium", "Hidrogen", "Oksigen", "Litium"],
	answer: "Hidrogen"
	},
	{
	question: "Zat yang biasa digunakan untuk menyimpan energi listrik pada baterai adalah?",
	options: ["Tembaga", "Natrium", "Litium", "Timah"],
	answer: "Litium"
	},
	{
	question: "Simbol kimia dari Besi adalah?",
	options: ["Fe", "B", "Be", "Ir"],
	answer: "Fe"
	}
	];

	let current = 0;

	const questionEl = document.getElementById('question');
	const optionsEl = document.getElementById('options');
	const feedbackEl = document.getElementById('feedback');
	const nextBtn = document.getElementById('nextBtn');

	function loadQuestion() {
	feedbackEl.textContent = '';
	nextBtn.style.display = 'none';

	const q = questions[current];
	questionEl.textContent = q.question;
	optionsEl.innerHTML = '';

	q.options.forEach(option => {
	const btn = document.createElement('div');
	btn.className = 'option';
	btn.textContent = option;
	btn.onclick = () => checkAnswer(option);
	optionsEl.appendChild(btn);
	});
	}

	function checkAnswer(selected) {
	const correct = questions[current].answer;
	feedbackEl.textContent = selected === correct ? "✅ Benar!" : `❌ Salah! Jawaban: ${correct}`;
	nextBtn.style.display = 'inline-block';
	}

	nextBtn.onclick = () => {
	current = (current + 1) % questions.length;
	loadQuestion();
	};

	loadQuestion();
	body {
	font-family: 'Segoe UI', sans-serif;
	background: linear-gradient(to right, #6dd5ed, #2193b0);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	}

	.container {
	background: #ffffff10;
	backdrop-filter: blur(10px);
	padding: 30px;
	border-radius: 15px;
	width: 90%;
	max-width: 500px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	text-align: center;
	}

	#question {
	font-size: 1.3rem;
	margin-bottom: 20px;
	}

	.option {
	display: block;
	background: #ffffff20;
	border: 1px solid #ffffff30;
	padding: 10px;
	margin: 10px auto;
	border-radius: 10px;
	cursor: pointer;
	transition: 0.2s;
	}

	.option:hover {
	background: #ffffff30;
	}

	#feedback {
	margin-top: 15px;
	font-weight: bold;
	}

	#nextBtn {
	margin-top: 20px;
	padding: 10px 20px;
	font-weight: bold;
	border: none;
	border-radius: 8px;
	background: #ffffff33;
	color: #fff;
	cursor: pointer;
	}

	#nextBtn:hover {
	background: #ffffff55;
	}