Untitled

<!DOCTYPE html><html lang="en">
<head>
  <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Passive Voice Quiz</title>
        <style>
            body {
                      font-family: Arial, sans-serif;
                            background: #f4f4f4;
                                  padding: 20px;
            }.container {
                  max-width: 700px;
                    margin: auto;
                      background: white;
                        padding: 20px;
                          border-radius: 12px;
                            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            }

            h1 {
                  text-align: center;
            }

            .question {
                  margin-bottom: 25px;
                    padding: 15px;
                      border: 1px solid #ddd;
                        border-radius: 10px;
            }

            input {
                  width: 100%;
                    padding: 10px;
                      margin-top: 10px;
                        border-radius: 6px;
                          border: 1px solid #aaa;
                            font-size: 16px;
            }

            button {
                  margin-top: 10px;
                    padding: 10px 15px;
                      border: none;
                        border-radius: 6px;
                          cursor: pointer;
                            font-size: 16px;
            }

            .correct {
                  background-color: #b6ffb6;
            }

            .wrong {
                  background-color: #ffb6b6;
            }

            .answer {
                  margin-top: 10px;
                    font-weight: bold;
            }

              </style>
              </head>
              <body>
                <div class="container">
                    <h1>Passive Voice Quiz</h1><div class="question">
                      <p><b>1.</b> Ali eats mangoes.</p>
                        <input type="text" id="q1" placeholder="Type passive voice here" />
                          <button onclick="checkAnswer('q1', 'Mangoes are eaten by Ali.')">Check</button>
                            <div class="answer" id="a1"></div>
                            </div>

                            <div class="question">
                              <p><b>2.</b> Sara wrote a letter.</p>
                                <input type="text" id="q2" placeholder="Type passive voice here" />
                                  <button onclick="checkAnswer('q2', 'A letter was written by Sara.')">Check</button>
                                    <div class="answer" id="a2"></div>
                                    </div>

                                    <div class="question">
                                      <p><b>3.</b> They will complete the work.</p>
                                        <input type="text" id="q3" placeholder="Type passive voice here" />
                                          <button onclick="checkAnswer('q3', 'The work will be completed by them.')">Check</button>
                                            <div class="answer" id="a3"></div>
                                            </div>

                                            <div class="question">
                                              <p><b>4.</b> Ahmed is washing the car.</p>
                                                <input type="text" id="q4" placeholder="Type passive voice here" />
                                                  <button onclick="checkAnswer('q4', 'The car is being washed by Ahmed.')">Check</button>
                                                    <div class="answer" id="a4"></div>
                                                    </div>

                                                    <div class="question">
                                                      <p><b>5.</b> The teacher has checked the homework.</p>
                                                        <input type="text" id="q5" placeholder="Type passive voice here" />
                                                          <button onclick="checkAnswer('q5', 'The homework has been checked by the teacher.')">Check</button>
                                                            <div class="answer" id="a5"></div>
                                                            </div>

                                                              </div>  <script>
                                                                  function checkAnswer(id, correctAnswer) {
                                                                          const input = document.getElementById(id);
                                                                                const userAnswer = input.value.trim().toLowerCase();
                                                                                      const correct = correctAnswer.trim().toLowerCase();
                                                                                            const answerBox = document.getElementById('a' + id.substring(1));

                                                                                                  if (userAnswer === correct) {
                                                                                                            input.className = 'correct';
                                                                                                                    answerBox.innerHTML = 'Correct!';
                                                                                                  } else {
                                                                                                            input.className = 'wrong';
                                                                                                                    answerBox.innerHTML = 'Wrong! Correct answer: ' + correctAnswer;
                                                                                                  }
                                                                  }
                                                                    </script></body>
                                                                    </html>
                                                                                                  }
                                                                                                  }
                                                                  }
            }
            }
            }
            }
            }
            }
            }
            }
            }
Editor is loading...