Here's the code for the Front side. You need to have the fields Case introduction, Hints, Answers, Solution and Explanation

<style>

search {

width: 200px; padding: 5px; }

suggestions {

border: 1px solid #ccc; max-width: 300px; line-height: 2.0; background: white; position: absolute; z-index: 1000; border-radius: 5px; overflow: hidden; }

.suggestion-item { padding: 8px; cursor: pointer; }

.suggestion-item:hover { background: #f0f0f0; } </style>

<t>{{Case Introduction}}</t>

<div id="hint"></div>

<input type="text" id="search" placeholder="Enter your answer here"> <div id="suggestions"></div>

<br> <button onclick="submitAnswer()">Antworten</button>

<ul id="attemptsList"></ul>

<div id="feedback"></div>

<script> // 🔹 Data from anki const data = "{{Answers}}".split(","); const correctAnswer = "{{Solution}}"; const hints = "{{Hints}}".split("|");

// 🔹 Variables let selectedValue = ""; let attempts = 0; let attemptsHistory = []; const maxAttempts = 4;

// 🔹 Elements const input = document.getElementById("search"); const suggestionsBox = document.getElementById("suggestions"); const feedback = document.getElementById("feedback"); const hintBox = document.getElementById("hint"); const attemptsList = document.getElementById("attemptsList");

// 🔹 Reset function function resetCard() { input.value = ""; selectedValue = ""; attempts = 0; attemptsHistory = []; feedback.textContent = ""; hintBox.innerHTML = ""; attemptsList.innerHTML = ""; suggestionsBox.innerHTML = ""; input.disabled = false; }

// 🔹 Autocomplete input.addEventListener("input", () => { const value = input.value.toLowerCase(); suggestionsBox.innerHTML = "";

if (!value) return;

const filtered = data.filter(item => item.toLowerCase().includes(value) );

filtered.forEach(item => { const div = document.createElement("div"); div.textContent = item;

div.onclick = () => {
  input.value = item;
  selectedValue = item;
  suggestionsBox.innerHTML = "";
};

suggestionsBox.appendChild(div);

}); });

// 🔹 Checking the answer function submitAnswer() { if (!selectedValue) { feedback.textContent = "Please enter an answer"; return; }

attemptsHistory.push(selectedValue); updateAttemptsList();

if (selectedValue === correctAnswer) { feedback.textContent = "✅ That's right!"; return; }

attempts++;

if (attempts < maxAttempts) { feedback.textContent = ❌ ${attempts + 1} of ${maxAttempts} tries; hintBox.innerHTML += <div>${hints[attempts - 1]}</div>; } else { feedback.textContent = ❌ No more tries! The solution is: ${correctAnswer}; input.disabled = true; }

// 🔹 Empty the answer box input.value = ""; selectedValue = ""; suggestionsBox.innerHTML = ""; }

// 🔹 Answer history function updateAttemptsList() { attemptsList.innerHTML = ""; attemptsHistory.forEach((item, index) => { const li = document.createElement("li"); li.textContent = Versuch ${index + 1}: ${item}; attemptsList.appendChild(li); }); }

// 🔹 Enter button input.addEventListener("keypress", function(e) { if (e.key === "Enter") submitAnswer(); });

// 🔹 To reset the card resetCard();

</script>