Science | Educational Website

Science HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Science | Educational Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<style>
    body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 1em;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    background-color: #333;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    padding: 14px 20px;
    display: block;
}

nav ul li a:hover {
    background-color: #ddd;
    color: black;
}

h1, h2 {
    text-align: center;
}

section {
    padding: 20px;
    text-align: center;
}

form {
    margin: 20px auto;
}

button {
    padding: 10px 15px;
    margin-top: 10px;
    cursor: pointer;
}

</style>
<body>
    <header>
        <h1>Science Topics</h1>
    </header>
    <section>
        <h2>Select Your Grade</h2>
        <form id="grade-form" onsubmit="loadQuestions(event, 'science')">
            <label for="grade">Choose Grade:</label>
            <select id="grade" name="grade">
                <option value="1">Grade 1</option>
                <option value="2">Grade 2</option>
                <option value="3">Grade 3</option>
            </select>
            <button type="submit">Submit</button>
        </form>
        <div id="questions-container"></div>
    </section>
    <script>
        const questions = {
    math: {
        1: ["What is 1 + 1?", "What is 2 - 1?"],
        2: ["What is 5 + 3?", "What is 10 - 4?"],
        3: ["What is 12 + 8?", "What is 20 - 7?"]
    },
    science: {
        1: ["What do plants need to grow?", "What is water made of?"],
        2: ["What is the sun?", "What do animals eat?"],
        3: ["What is gravity?", "How do plants make food?"]
    },
    history: {
        1: ["Who was the first president?", "What is a map?"],
        2: ["When did Columbus sail?", "What are the 13 colonies?"],
        3: ["What caused the Civil War?", "Who signed the Constitution?"]
    },
    english: {
        1: ["What is a noun?", "What is an adjective?"],
        2: ["What is a verb?", "What is an adverb?"],
        3: ["What is a simile?", "What is a metaphor?"]
    }
};

function loadQuestions(event, subject) {
    event.preventDefault();
    const grade = document.getElementById('grade').value;
    const questionContainer = document.getElementById('questions-container');
    const subjectQuestions = questions[subject][grade];

    questionContainer.innerHTML = '<h3>Questions:</h3>';
    subjectQuestions.forEach(question => {
        const questionElement = document.createElement('p');
        questionElement.textContent = question;
        questionContainer.appendChild(questionElement);
    });
}

    </script>
</body>
</html>