Jen to, co ještě neumíte
Slovíčka, která umíte, procvičovat nepotřebujete. V tomto cvičení bude aplikace ukazovat jen kartičky, které ještě neumíte, a až budete umět všechny, řekne vám to a nechá vás začít znovu.
Které kartičky zbývají, se spočítá, stejně jako balíček. filter() nechá slovíčka, jejichž id v naucene není:
const kProcviceni = balicek.filter(
(slovicko) => !naucene.includes(slovicko.id),
);Kartička je pak kProcviceni[index] a pozice počítá také kProcviceni: 1 / 9 znamená, že zbývá devět slovíček. Skóre dál počítá celý balíček.
Tím se mění, co dělá tlačítko Umím. Když kartičku označíte, z kProcviceni vypadne a na její místo, pod stejný index, se posune další kartička. oznacNaucene() proto už nepřechází dál pomocí jdiDal(). Jen když byla kartička poslední, nemá se na její místo co posunout, a aplikace se proto vrátí na první kartičku:
function oznacNaucene() {
if (!naucene.includes(karticka.id)) {
setNaucene((naucene) => [...naucene, karticka.id]);
}
if (index === kProcviceni.length - 1) {
setIndex(0);
}
}A když je kProcviceni prázdné, nezbývá žádná kartička, kterou by šlo ukázat. App pak vrátí jinou stránku, se zprávou a tlačítkem Začít znovu, které vyprázdní naucene a vrátí se na první kartičku.
Jak psát:
Pokyny
Pod balicek vytvořte kProcviceni jako v ukázce a použijte ho místo balicek u kartičky, pozice, tlačítka Další i ve funkci jdiDal() (skóre si nechá balicek.length). Ve funkci oznacNaucene() nahraďte jdiDal() návratem na první kartičku jako v ukázce. Klikněte na Umím: pozice ukáže 1 / 11 a kartička další slovíčko.
Před return s kartičkami přidejte ještě jeden: když je kProcviceni.length rovno 0, vraťte main s nadpisem, <p className="hotovo">Umíte všechna slovíčka!</p> a tlačítkem Začít znovu. Jeho obsluha zacniZnovu() vyprázdní naucene a nastaví index zpátky na 0. Tuhle stránku uvidíte, až označíte všechny kartičky.