```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Minimal pairs - /a&#650;/ and /a&#650;&#601;/ listening exercise</title>
<meta name="description" content="One-at-a-time listening practice contrasting /a&#650;/ and /a&#650;&#601;/ in British English.">

<style>
@page { size: A4; margin: 18mm; }

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: #e5e5e5;
    color: #222;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.page {
    width: 210mm;
    min-height: 297mm;
    margin: 15mm auto;
    padding: 18mm 22mm;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,.22);
}

.screen-nav {
    margin: 0 0 16px;
    padding: 7px 0;
    text-align: center;
    font-size: 13px;
    border-bottom: 1px solid #ddd;
}

.screen-nav a {
    color: #245a8d;
    text-decoration: none;
    margin: 0 5px;
}

.screen-nav a:hover,
.screen-nav a:focus {
    text-decoration: underline;
}

h1 {
    margin: 0 0 8px;
    text-align: center;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 600;
}

.subtitle {
    margin: 0 0 12px;
    text-align: center;
    font-size: 16px;
}

.phonemes {
    margin: 0 0 20px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}

.phoneme {
    font-family: "Lucida Sans Unicode", "Arial Unicode MS", Arial, sans-serif;
}

.exercise {
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

.counter {
    font-size: 14px;
    color: #555;
    margin-bottom: 18px;
}

.instruction {
    margin: 0 0 22px;
    font-size: 15px;
}

.listen-button {
    padding: 9px 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    cursor: pointer;
}

.answers {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 25px;
}

.answer-button {
    min-width: 130px;
    padding: 10px 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    cursor: pointer;
}

.feedback {
    min-height: 30px;
    margin-top: 18px;
    font-weight: 600;
}

.word-display {
    margin-top: 18px;
    font-size: 22px;
    min-height: 34px;
    visibility: hidden;
}

.word-display.visible {
    visibility: visible;
}

.next-button {
    margin-top: 18px;
    padding: 9px 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    cursor: pointer;
    display: none;
}

.footer {
    margin-top: 30px;
    text-align: center;
    font-size: 12px;
}
@media (max-width: 800px) {
    body {
        background: white;
    }

    .page {
        width: 94%;
        min-height: auto;
        margin: 20px auto;
        padding: 24px 28px;
        box-shadow: none;
    }

    .answers {
        gap: 10px;
    }

    .answer-button {
        min-width: 110px;
    }
}

@media print {
    body {
        background: white;
        font-size: 11pt;
    }

    .page {
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }

    .screen-nav,
    .exercise {
        display: none !important;
    }

    h1 {
        font-size: 18pt;
    }

    .subtitle {
        font-size: 12pt;
    }

    .phonemes {
        font-size: 13.5pt;
    }

    .footer {
        font-size: 8.5pt;
    }
}

.next-exercise {
    margin: 28px auto 0;
    padding-top: 18px;
    border-top: 1px solid #ddd;
    text-align: center;
    font-size: 15px;
}

.next-exercise a {
    color: #245a8d;
    text-decoration: none;
}

.next-exercise a:hover,
.next-exercise a:focus {
    text-decoration: underline;
}

@media print {
    .next-exercise {
        display: none;
    }
}
</style>
</head>

<body>
<div class="page">

<div class="screen-nav">
    <a href="minimal-exercises.html">Minimal Pairs: Listening exercises</a> |<a href="minimal.html">Minimal Pairs</a> |
    <a href="phono.html">L1 pronunciation problems</a> |
    <a href="index.html">Home</a>
</div>

<h1>Minimal Pairs</h1>

<p class="subtitle">Vowel Sounds in British English</p>

<div class="phonemes">
    <span class="phoneme">/a&#650;/</span>
    &nbsp;&nbsp;&nbsp;
    <span class="phoneme">/a&#650;&#601;/</span>
</div>

<div class="exercise">

    <div class="counter" id="counter"></div>

    <p class="instruction">
        Listen to the word. Then decide which sound you hear.
    </p>

    <button class="listen-button" id="listen" type="button">
        Listen again
    </button>

    <div class="answers">

        <button class="answer-button" type="button"
                onclick="answer('word1')">
            /a&#650;/
        </button>

        <button class="answer-button" type="button"
                onclick="answer('word2')">
            /a&#650;&#601;/
        </button>

    </div>

    <div class="feedback" id="feedback" aria-live="polite"></div>

    <div class="word-display" id="wordDisplay"></div>

    <button class="next-button" id="next" type="button"
            onclick="nextQuestion()">
        Next question
    </button>

</div>

<div class="footer">
    Minimal pairs listening practice – British English vowel contrast
</div>
<div class="next-exercise">
    <a href="minimal0102i.html">
        Next exercise: Bit or Bet – Listening discrimination exercise →
    </a>
</div>

</div>

<script>

const pairs = [
    {word1:"bow", word2:"bower"},
    {word1:"cow", word2:"cower"},
    {word1:"ow", word2:"hour"},
    {word1:"ow", word2:"our"},
    {word1:"sow", word2:"sour"}
];

let current = 0;
let answered = false;
let currentSpokenWord = "";
let voices = [];

const listenButton = document.getElementById("listen");
const feedback = document.getElementById("feedback");
const wordDisplay = document.getElementById("wordDisplay");
const nextButton = document.getElementById("next");
const counter = document.getElementById("counter");

function loadVoices() {
    if ("speechSynthesis" in window) {
        voices = window.speechSynthesis.getVoices();
    }
}

loadVoices();

if ("speechSynthesis" in window) {
    window.speechSynthesis.onvoiceschanged = loadVoices;
}

function speakWord(word) {

    if (!("speechSynthesis" in window)) {
        feedback.textContent =
            "Speech synthesis is not available in this browser.";
        return;
    }

    window.speechSynthesis.cancel();

    const utterance = new SpeechSynthesisUtterance(word);

    utterance.lang = "en-GB";
    utterance.rate = 0.82;
    utterance.pitch = 1;

    const britishVoice = voices.find(v =>
        v.lang && v.lang.toLowerCase() === "en-gb"
    );

    if (britishVoice) {
        utterance.voice = britishVoice;
    }

    utterance.onstart = function () {
        feedback.textContent = "";
    };

    utterance.onerror = function () {
        feedback.textContent =
            "The browser could not play the speech. Please try the Listen again button.";
    };

    window.speechSynthesis.speak(utterance);
}

function playCurrent() {

    const item = pairs[current];

    currentSpokenWord =
        Math.random() < 0.5 ? item.word1 : item.word2;

    speakWord(currentSpokenWord);
}

function answer(choice) {

    if (answered) return;

    answered = true;

    const item = pairs[current];

    const correctChoice =
        currentSpokenWord === item.word1
            ? "word1"
            : "word2";

    if (choice === correctChoice) {

        feedback.textContent = "Correct.";

    } else {

        feedback.textContent =
            'Not quite. The word was "' +
            currentSpokenWord +
            '".';
    }

    wordDisplay.textContent = currentSpokenWord;
    wordDisplay.classList.add("visible");

    if (current < pairs.length - 1) {

        nextButton.style.display = "inline-block";

    } else {

        feedback.textContent +=
            " You have completed the exercise.";
    }
}

function nextQuestion() {

    current++;
    answered = false;

    feedback.textContent = "";

    wordDisplay.textContent = "";
    wordDisplay.classList.remove("visible");

    nextButton.style.display = "none";

    updateCounter();

    playCurrent();
}

function updateCounter() {

    counter.textContent =
        "Question " +
        (current + 1) +
        " of " +
        pairs.length;
}

listenButton.addEventListener("click", function () {
    playCurrent();
});

updateCounter();

</script>

</body>
</html>
```