english-easy/exercises.html

176 lines
7.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Exercises — English Easy</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="header-inner">
<a href="index.html" class="logo">English <span>Easy</span></a>
<button class="menu-toggle" aria-label="Menu"></button>
<nav>
<ul class="nav-list">
<li><a href="index.html">Home</a></li>
<li><a href="vocabulary.html">Vocabulary</a></li>
<li><a href="grammar.html">Grammar</a></li>
<li><a href="pronunciation.html">Pronunciation</a></li>
<li><a href="exercises.html">Exercises</a></li>
<li><a href="tests.html">Tests</a></li>
<li><a href="reading.html">Reading</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="page-header">
<div class="container">
<h1>Exercises</h1>
<p>Practice your English with these fun exercises.</p>
</div>
</section>
<section class="section">
<div class="container">
<!-- Exercise 1: Choose the correct answer -->
<div class="exercise">
<h3>1. Choose the correct answer</h3>
<p class="question">I ___ English every day.</p>
<div class="options">
<label class="option"><input type="radio" name="ex1" value="true"> study</label>
<label class="option"><input type="radio" name="ex1" value="false"> studies</label>
<label class="option"><input type="radio" name="ex1" value="false"> studied</label>
</div>
<button class="btn btn-primary" onclick="checkExercise(this)">Check</button>
<div class="feedback"></div>
</div>
<!-- Exercise 2: Choose the correct answer -->
<div class="exercise">
<h3>2. Choose the correct answer</h3>
<p class="question">She ___ a student.</p>
<div class="options">
<label class="option"><input type="radio" name="ex2" value="false"> am</label>
<label class="option"><input type="radio" name="ex2" value="true"> is</label>
<label class="option"><input type="radio" name="ex2" value="false"> are</label>
</div>
<button class="btn btn-primary" onclick="checkExercise(this)">Check</button>
<div class="feedback"></div>
</div>
<!-- Exercise 3: Choose the correct answer -->
<div class="exercise">
<h3>3. Choose the correct answer</h3>
<p class="question">They ___ football yesterday.</p>
<div class="options">
<label class="option"><input type="radio" name="ex3" value="false"> play</label>
<label class="option"><input type="radio" name="ex3" value="true"> played</label>
<label class="option"><input type="radio" name="ex3" value="false"> playing</label>
</div>
<button class="btn btn-primary" onclick="checkExercise(this)">Check</button>
<div class="feedback"></div>
</div>
<!-- Exercise 4: Fill in the gap -->
<div class="exercise">
<h3>4. Fill in the gap</h3>
<p class="question">I ___ a book every day. (read / reads)</p>
<div>
<input type="text" class="fill-input" data-answer="read" placeholder="Type your answer">
</div>
<br>
<button class="btn btn-primary" onclick="checkFill(this.previousElementSibling.previousElementSibling.querySelector('input'))">Check</button>
<div class="feedback"></div>
</div>
<!-- Exercise 5: Fill in the gap -->
<div class="exercise">
<h3>5. Fill in the gap</h3>
<p class="question">She ___ to school every day. (go / goes)</p>
<div>
<input type="text" class="fill-input" data-answer="goes" placeholder="Type your answer">
</div>
<br>
<button class="btn btn-primary" onclick="checkFill(this.previousElementSibling.previousElementSibling.querySelector('input'))">Check</button>
<div class="feedback"></div>
</div>
<!-- Exercise 6: Fill in the gap -->
<div class="exercise">
<h3>6. Fill in the gap</h3>
<p class="question">They ___ visiting their grandmother yesterday. (was / were)</p>
<div>
<input type="text" class="fill-input" data-answer="were" placeholder="Type your answer">
</div>
<br>
<button class="btn btn-primary" onclick="checkFill(this.previousElementSibling.previousElementSibling.querySelector('input'))">Check</button>
<div class="feedback"></div>
</div>
<!-- Exercise 7: Translate -->
<div class="exercise">
<h3>7. Translate the sentence</h3>
<p class="question">Translate: «Я люблю музыку.»</p>
<div>
<input type="text" class="fill-input" data-answer="i like music" placeholder="Type your translation">
</div>
<br>
<button class="btn btn-primary" onclick="checkTranslate(this)">Check</button>
<div class="feedback"></div>
</div>
<!-- Exercise 8: Translate -->
<div class="exercise">
<h3>8. Translate the sentence</h3>
<p class="question">Translate: «Он мой друг.»</p>
<div>
<input type="text" class="fill-input" data-answer="he is my friend" placeholder="Type your translation">
</div>
<br>
<button class="btn btn-primary" onclick="checkTranslate(this)">Check</button>
<div class="feedback"></div>
</div>
<!-- Exercise 9: Match words -->
<div class="exercise">
<h3>9. Match words with translations</h3>
<p class="question">Write the translation for each word:</p>
<div style="display:flex;flex-direction:column;gap:10px;margin-bottom:12px;">
<div>Book → <input type="text" class="fill-input" data-answer="книга" style="width:120px;"></div>
<div>School → <input type="text" class="fill-input" data-answer="школа" style="width:120px;"></div>
<div>Friend → <input type="text" class="fill-input" data-answer="друг" style="width:120px;"></div>
</div>
<button class="btn btn-primary" onclick="checkMatch(this)">Check All</button>
<div class="feedback"></div>
</div>
<!-- Exercise 10: Fill in the gap (article) -->
<div class="exercise">
<h3>10. Choose the correct answer</h3>
<p class="question">I have ___ apple.</p>
<div class="options">
<label class="option"><input type="radio" name="ex10" value="false"> a</label>
<label class="option"><input type="radio" name="ex10" value="true"> an</label>
<label class="option"><input type="radio" name="ex10" value="false"> the</label>
</div>
<button class="btn btn-primary" onclick="checkExercise(this)">Check</button>
<div class="feedback"></div>
</div>
</div>
</section>
<footer>
<div class="container">
<p>&copy; 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>