cccc

Admin

 <!DOCTYPE html>

<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Media Pembelajaran Digital</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            margin: 0;

            padding: 0;

            background: #f4f4f4;

        }

        header {

            background: #007bff;

            color: white;

            text-align: center;

            padding: 20px;

        }

        nav {

            background: #333;

            display: flex;

            justify-content: center;

        }

        nav a {

            color: white;

            padding: 15px;

            text-decoration: none;

        }

        nav a:hover {

            background: #007bff;

        }

        section {

            padding: 20px;

        }

        .quiz-box {

            background: #fff;

            padding: 15px;

            border-radius: 8px;

            box-shadow: 0 0 10px #ccc;

            margin-top: 20px;

        }

        .btn {

            display: inline-block;

            padding: 10px 15px;

            margin-top: 10px;

            background: #007bff;

            color: white;

            border: none;

            cursor: pointer;

            border-radius: 5px;

        }

        .btn:hover {

            background: #0056b3;

        }

    </style>

</head>

<body>

    <header>

        <h1>Media Pembelajaran Digital</h1>

        <p>Mata Pelajaran: Bahasa Indonesia</p>

    </header>

    <nav>

        <a href="#materi">Materi</a>

        <a href="#video">Video</a>

        <a href="#quiz">Quiz</a>

    </nav>


    <section id="materi">

        <h2>📘 Materi Pembelajaran</h2>

        <p>Silakan unduh materi di bawah ini:</p>

        <a href="materi.pdf" class="btn" download>Download PDF</a>

    </section>


    <section id="video">

        <h2>🎥 Video Pembelajaran</h2>

        <iframe width="100%" height="315" src="https://www.youtube.com/embed/VIDEO_ID" 

                frameborder="0" allowfullscreen></iframe>

    </section>


    <section id="quiz">

        <h2>📝 Quiz</h2>

        <div class="quiz-box">

            <p>1. Apa ibu kota Indonesia?</p>

            <input type="radio" name="q1" value="a"> Surabaya <br>

            <input type="radio" name="q1" value="b"> Jakarta <br>

            <input type="radio" name="q1" value="c"> Bandung <br>

            <button class="btn" onclick="cekJawaban()">Kirim Jawaban</button>

            <p id="hasil"></p>

        </div>

    </section>


    <script>

        function cekJawaban() {

            let jawaban = document.querySelector('input[name="q1"]:checked');

            if (jawaban && jawaban.value === 'b') {

                document.getElementById('hasil').innerText = "✅ Benar! Jakarta adalah ibu kota Indonesia.";

            } else {

                document.getElementById('hasil').innerText = "❌ Salah! Coba lagi.";

            }

        }

    </script>

</body>

</html>