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

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

* {
    box-sizing: border-box;
}

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

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

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

.screen-nav {
    margin: 0 0 20px;
    padding: 8px 0;
    text-align: center;
    font-size: 14px;
    border-bottom: 1px solid #ddd;
}

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

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

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

.introduction {
    margin: 0 auto 22px;
    text-align: center;
}

.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;
}

.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: 13px;
}
@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: 12pt;
    }

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

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

    h1 {
        font-size: 18pt;
    }

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

.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 –
        <span class="phoneme">/s/</span> and
        <span class="phoneme">/z/</span>
    </h1>

    <p class="introduction">
        <span class="phoneme">/s/</span> as in <strong>"sip"</strong>
        &nbsp; · &nbsp;
        <span class="phoneme">/z/</span> as in <strong>"zip"</strong>
    </p>

    <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
        </button>

        <div class="answers">

            <button class="answer-button" type="button"
                    onclick="answer('word1')">
                /s/
            </button>

            <button class="answer-button" type="button"
                    onclick="answer('word2')">
                /z/
            </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 consonant contrast
    </div>

<div class="next-exercise">
    <a href="minimal3435i.html">
        Next exercise: Minimal Pairs – /n/ and /ŋ/ Listening Exercise →
    </a>
</div>

</div>

<script>

const pairs = [
    {word1:"sip", word2:"zip"},
    {word1:"Sue", word2:"zoo"},
    {word1:"said", word2:"Zed"},
    {word1:"seal", word2:"zeal"},
    {word1:"ice", word2:"eyes"},
    {word1:"rice", word2:"rise"},
    {word1:"lice", word2:"lies"},
    {word1:"price", word2:"prize"},
    {word1:"dice", word2:"dies"},
    {word1:"grace", word2:"graze"},
    {word1:"face", word2:"phase"},
    {word1:"mace", word2:"maze"},
    {word1:"lace", word2:"laze"},
    {word1:"place", word2:"plays"},
    {word1:"bus", word2:"buzz"},
    {word1:"niece", word2:"knees"},
    {word1:"pierce", word2:"peers"},
    {word1:"fierce", word2:"fears"},
    {word1:"loose", word2:"lose"}
];

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 button again.";
    };

    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>
```