```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Minimal pairs - /d&#658;/ and /j/ listening exercise</title>
<meta name="description" content="One-at-a-time listening practice contrasting /d&#658;/ and /j/ 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">/d&#658;/</span> and
    <span class="phoneme">/j/</span>
</h1>

<p class="introduction">
    <span class="phoneme">/d&#658;/</span> as in <strong>"jet"</strong>
    &nbsp; · &nbsp;
    <span class="phoneme">/j/</span> as in <strong>"yet"</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 again
    </button>

    <div class="answers">
        <button class="answer-button" type="button"
                onclick="answer('word1')">
            /d&#658;/
        </button>

        <button class="answer-button" type="button"
                onclick="answer('word2')">
            /j/
        </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="minimal202007i.html">
        Next exercise: Minimal pairs - /aʊ/ and /aʊə/ listening exercise →
    </a>
</div>

</div>

<script>

const pairs = [
    {word1:"jet",word2:"yet"},
    {word1:"juice",word2:"use"},
    {word1:"job",word2:"yob"},
    {word1:"jot",word2:"yacht"},
    {word1:"jeer",word2:"year"},
    {word1:"jaw",word2:"your"},
    {word1:"jaws",word2:"yours"},
    {word1:"Jack",word2:"yak"},
    {word1:"joke",word2:"yolk"},
    {word1:"jam",word2:"yam"},
    {word1:"jarred",word2:"yard"},
    {word1:"Jews",word2:"use"},
    {word1:"gel",word2:"yell"},
    {word1:"jarred",word2:"yard"},
    {word1:"John",word2:"yon"}
];

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