Hi there
I need help fixing a code, I’m a complete beginner but I managed to do this.
The recto code and the verso code below work perfectly for my card model except for 2 problems.
On Ankiweb that works I can write what I want on the text zone and the 3 buttons “remise à 0” “langue au chat” “vérifier” do their job.
The only problem is that the answer of one card goes on the others.
On Ankidroid, of course, this problem is solved and that’s a good thing.
Only I can’t access the phone’s keyboard in my text zone.
I use ankidroid 2.20
Please, you could find the code I use for recto and verso under
The Recto code
{{Recto VO}}<br>
{{hint:Recto VF}}<br>
{{hint:Son recto}}<br>
{{hint:Image Recto}}<br>
{{hint:Indice(s) Recto VO}}<br>
{{hint:Indice(s) Recto VF}}<br><br>
<!-- Consigne visible -->
<div style="font-size: 18px; margin-bottom: 10px;">
<strong>Avant de répondre, cliquez sur "Remise à 0" pour réinitialiser la carte.</strong>
</div><br>
<!-- Zone interactive -->
<input id="answer" type="text" placeholder="Tapez votre réponse"
virtualkeyboardpolicy="manual" style="width: 100%; padding: 10px; font-size: 16px;">
<button onclick="checkAnswer()">Vérifier</button>
<button onclick="revealAnswers()">Tu donnes ta langue au chat ?</button>
<button onclick="resetState()">Remise à 0</button>
<!-- Feedback et score -->
<div id="feedback"></div>
<div id="score"></div>
<div id="revealed-answers" style="display: none; margin-top: 10px;"></div>
<script>
// Initialisation des variables
let correctAnswersFound = 0;
const totalAnswers = [
"{{Verso VO}}",
"{{Verso VO 1}}",
"{{Verso VO 2}}",
"{{Verso VO 3}}",
"{{Verso VF}}",
"{{Verso VF 1}}",
"{{Verso VF 2}}",
"{{Verso VF 3}}"
].filter(answer => answer.trim() !== ""); // Éliminer les champs vides
const foundAnswers = new Set();
const attemptedAnswers = [];
// Fonction pour réinitialiser l'état
function resetState() {
correctAnswersFound = 0;
foundAnswers.clear();
attemptedAnswers.length = 0;
document.getElementById("feedback").innerHTML = "";
document.getElementById("score").innerHTML = "";
document.getElementById("revealed-answers").style.display = "none";
document.getElementById("revealed-answers").innerHTML = "";
const inputField = document.getElementById("answer");
inputField.value = ""; // Vide le champ de saisie
inputField.focus(); // Ajoute le focus pour mobile
triggerVirtualKeyboard(inputField);
}
// Fonction pour forcer l'ouverture du clavier virtuel
function triggerVirtualKeyboard(inputField) {
if ("virtualKeyboard" in navigator) {
navigator.virtualKeyboard.show();
} else {
console.warn("Clavier virtuel non pris en charge sur cet appareil.");
}
}
// Gestion de l'affichage correct du clavier virtuel à l'initialisation
document.addEventListener("DOMContentLoaded", () => {
const inputField = document.getElementById("answer");
resetState();
triggerVirtualKeyboard(inputField);
inputField.addEventListener("focus", () => {
triggerVirtualKeyboard(inputField);
});
});
// Vérification de la réponse
function checkAnswer() {
const userAnswer = document.getElementById("answer").value.trim();
const feedback = document.getElementById("feedback");
const score = document.getElementById("score");
if (userAnswer) {
attemptedAnswers.push(userAnswer); // Stocke toutes les réponses
}
if (totalAnswers.includes(userAnswer)) {
if (!foundAnswers.has(userAnswer)) {
foundAnswers.add(userAnswer);
correctAnswersFound++;
feedback.innerHTML = "Bonne réponse !";
feedback.style.color = "green";
} else {
feedback.innerHTML = "Vous avez déjà trouvé cette réponse.";
feedback.style.color = "orange";
}
} else {
feedback.innerHTML = "Mauvaise réponse. Essayez encore.";
feedback.style.color = "red";
}
score.innerHTML = `Vous avez trouvé ${correctAnswersFound} réponse(s) sur ${totalAnswers.length}.`;
if (correctAnswersFound === totalAnswers.length) {
revealCard();
}
}
// Révéler les réponses
function revealAnswers() {
const revealedAnswersDiv = document.getElementById("revealed-answers");
revealedAnswersDiv.innerHTML = `<strong>Les réponses possibles étaient :</strong><br>`;
totalAnswers.forEach(answer => {
if (foundAnswers.has(answer)) {
revealedAnswersDiv.innerHTML += `<span style="color: green;">✔ ${answer}</span><br>`;
} else {
revealedAnswersDiv.innerHTML += `<span>${answer}</span><br>`;
}
});
const incorrectAnswers = attemptedAnswers.filter(
answer => !totalAnswers.includes(answer)
);
if (incorrectAnswers.length > 0) {
revealedAnswersDiv.innerHTML += `<strong>Vos réponses incorrectes :</strong><br>`;
incorrectAnswers.forEach(answer => {
revealedAnswersDiv.innerHTML += `<span style="color: red;">✘ ${answer}</span><br>`;
});
}
revealedAnswersDiv.style.display = "block";
}
// Message de confirmation lorsque toutes les réponses sont trouvées
function revealCard() {
const feedback = document.getElementById("feedback");
feedback.innerHTML = "Toutes les réponses ont été trouvées ! Cliquez sur 'Afficher les réponses' pour continuer et pour plus de détails.";
feedback.style.color = "blue";
}
</script>
The verso code`
{{Recto VO}}<br>
{{hint:Recto VF}}<br>
{{hint:Son recto}}<br>
{{hint:Image Recto}}
<hr id="answer">
<!-- Bouton pour révéler les réponses -->
<button onclick="revealAnswers()">Tu veux voir la ou les réponse(s) ?</button><br><br>
<!-- Révélation des réponses -->
<div id="revealed-answers" style="display: none; margin-top: 10px;"></div>
<script>
// Initialisation des réponses
const totalAnswers = [
"{{Verso VO}}",
"{{Verso VO 1}}",
"{{Verso VO 2}}",
"{{Verso VO 3}}",
"{{Verso VF}}",
"{{Verso VF 1}}",
"{{Verso VF 2}}",
"{{Verso VF 3}}"
].filter(answer => answer.trim() !== ""); // Éliminer les champs vides
// Fonction pour révéler les réponses
function revealAnswers() {
const revealedAnswersDiv = document.getElementById("revealed-answers");
revealedAnswersDiv.innerHTML = `<strong>Les réponses possibles étaient :</strong><br>`;
totalAnswers.forEach(answer => {
revealedAnswersDiv.innerHTML += `<span>${answer}</span><br>`;
});
revealedAnswersDiv.style.display = "block";
}
</script>
<hr id="answer">
{{hint:Son Verso}}<br>
{{hint:image verso}}<br>
{{hint:Intitulé(s) Source(s) Verso}}<br>
{{hint:Date Source Verso}}<br>
{{hint:Réponse Détaillée Source Verso}}<br>
