Wikipedia basic 300px

TWIG|JINJA

{% for row in json.itemListElement %}
    <figure>
        <img {# for SEO - can be removed #}{% if loop.index > 4 %}loading="lazy"{% endif %}
        width="300" class="image" src="{{ row.item.image.thumbnail.contentUrl }}" data-answer="{{ row.item.name }}" alt="{{  row.item.name }}">
        <a class="wiki" rel="noreferrer" target="_blank" href="{{ row.item.url }}">W</a>
        <figcaption data-select data-search class="desc">{{  row.item.name }}</figcaption>
    </figure>
{% endfor%}

JavaScript

const QUESTION_INTERVAL = 15000
const HIGHLIGHT_WRONG = 5000

let interval = {}
let cycle = 0, barId = -1
let correct = [], wrong = [],data = []

const imgAfterClickEvent = (ev) => {
    const answer = ev.target.getAttribute('data-answer');
    if (answer === bb.get('text', barId)) {
        ev.target.parentNode.classList.add('correct');
        correct.push([answer, answer]);
        data.splice(cycle - 1, 1);
        bb.set({progress:allTheFish.json.itemListElement.length - data.length,correct:correct.length},barId)
        startTimerQuestions();
    } else {
        wrong.push([bb.get('text', barId), answer]);
        bb.set({wrong:wrong.length},barId)
        ev.target.parentNode.classList.add('js--wrong_answer');
        setTimeout(()=>{
            ev.target.parentNode.classList.remove('js--wrong_answer');
        }, HIGHLIGHT_WRONG);
    }
    if (correct.length === allTheFish.json.itemListElement.length) {
        stopQuestionsAndWin();
    }
}

const shuffle = (a) => {
    for (let i = a.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
}

const cycleText = () => {
    if (data.length <= cycle) {
        cycle = 0;
        data = shuffle(data);
    }
    if (data.length) {
        bb.set({text:data[cycle].item.name},barId)
    }
    cycle++;
}

const stopQuestionsAndWin = () => {
    clearInterval(interval);
    prgs.store_progress({
        collectionName:allTheFish.json.name,
        store_db:true,
        t:bb.get('timer',barId),
        correct:correct.length,
        wrong: wrong.length
    })
    const rand = Math.floor(Math.random() * allTheFish.amazingSynonym.length)
    bb.set({text:allTheFish.amazingSynonym[rand].text,start_timer:false},barId)
    document.body.classList.add('bg-correct')
}

const startTimerQuestions = () => {
    clearInterval(interval);
    cycleText();
    interval = window.setInterval(cycleText, QUESTION_INTERVAL);
}

const init = () => {
    cycle = 0;wrong.length =0;correct.length = 0;
    bb.del(barId);
    data = shuffle(allTheFish.json.itemListElement.slice());
    barId = bb.init({settings:{progress:0,correct:0,wrong:0,progress_max:data.length,start_timer:true}})
    prgs.show = false;
    document.body.classList.remove('bg-correct')

    let $imgNames = [...document.querySelectorAll('[data-search]')];
    $imgNames.map(el => el.classList.toggle('js--hidden_answer'));

    let $img = document.getElementsByClassName('image');
    [].forEach.call($img, el => el.parentNode.classList.remove('correct'));
    [].forEach.call($img, el => el.removeEventListener('click', imgAfterClickEvent));
    [].forEach.call($img, el => el.addEventListener('click', imgAfterClickEvent));
}

document.getElementById('run').classList.remove('js--hidden_btn_run');
document.getElementById('run').addEventListener('click', () => {
    init()
    startTimerQuestions()
})

CSS

.content {
  background-color: #f5f5f5;
  display:flex;
  flex-wrap:wrap;
}
img { cursor:pointer;}
img:hover {opacity:0.5;background-color:white; transition-delay: 75ms; transform: translate(3px,-3px) scale(1);}
figure { padding:5px; margin:0; max-width:300px;display:table;position:relative}
figcaption {word-break:break-all;}

.wiki {
	position:absolute;
	right: 3px;
    top: 3px;
    color: transparent;
    text-decoration: none;
    padding: 3px;
}
.wiki:hover {
   background-color:white;
   color:black;
}
.correct {  display:none; }
.bg-correct .correct { display:table;}
.bg-correct .desc {
    background-color: #007d00;
    color: white;
    visibility: visible;
}
.desc {
    font-size: 1.2em;
	text-align: center;
}
.js--hidden_answer { visibility:hidden;}
.js--wrong_answer { background-color:indianred;}
.js--wrong_answer .desc {
  color:white;
  visibility: visible !important;
}