Programmer un exercice interactif avec bouton radio et récupération de valeurs

Signaler
-
Messages postés
1
Date d'inscription
mercredi 15 avril 2020
Statut
Membre
Dernière intervention
16 avril 2020
-
Bonsoir,

Je débute en JS et je souhaiterais construire un site d'exercices interactifs.

Dans le code ci-dessous, je souhaiterais que l'élève qui répond juste (rosae), puisse obtenir un message de bonne réponse.
Cependant, avec mon code, quand je coche la bonne réponse, j'ai toujours un message d'erreur qui s'affiche. Et j'ignore pourquoi...

<!DOCTYPE html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Latin : la première déclinaison au pluriel</title>
<meta name="description" content="La première déclinaison au pluriel en latin. Méthode interactive de latin : testez vos connaissances.">


<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="https://fonts.googleapis.com/css2?family=Baloo+Thambi+2&family=Caveat+Brush&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<style type="text/css">
html
{
font-size: 100%
}
body
{
padding: 1em;
font-size: .85em;
font-family: 'Baloo Thambi 2', cursive;
}
h1,h2
{
max-width:600px;
margin:0 auto 15px;
text-align:center;
font-family: 'Caveat Brush', cursive;
}
h1
{
font-size:28px;
color: white;
background: -webkit-linear-gradient(top left, black, green);
border-radius: 10px;
}
h2
{
font-size:18px;
background:#fff;
}
ol, ul, li {
padding: 0;
margin: 1em;
}
img.displayed {
border-radius: 25px;
display: block;
margin-left: auto;
margin-right: auto;
}
input {
width: 160px;
background: burlywood;
border-radius: 5px;
}
label{
width:100px;
font-weight:bold;
margin-right:10px;
text-align:left;
}
form{
margin:0 auto;
background: -webkit-linear-gradient(top left, #800080,#FFFFFF);
background: -o-linear-gradient(bottom right, #800080,#FFFFFF);
background: linear-gradient(to bottom right, #800080,#FFFFFF);
border-radius: 25px;
padding:10px 20px;
width:75%;
text-align:center;
min-width:640px;
}
ul{
padding:0
}
li{
list-style-type:none
}
.barre{
width:100%;
height:2px;
background: -webkit-linear-gradient(to right, lightblue,burlywood);
background: -o-linear-gradient(to right, lightblue, burlywood);
background: linear-gradient(to right, lightblue, burlywood);
position:absolute;
left:0;
top:75px;
z-index:-1;
}
footer{
text-align:center;
}
</style>

<script type="text/javascript">

let messageTrèsbon = new Array()
messageTrèsbon[0] = 'Super !';
messageTrèsbon[1] = 'Très bien !';
messageTrèsbon[2] = 'Très beau travail !';
messageTrèsbon[3] = 'Génial !';
messageTrèsbon[4] = 'Un parcours sans faute !';
messageTrèsbon[5] = 'Optime !';
messageTrèsbon[6] = 'Cool ! Parfait !';
let messageBon = new Array()
messageBon[0] = 'Pas loin du compte !';
messageBon[1] = 'À un près, ça fait rager, hein ?';
messageBon[2] = 'R-1, dommage !';



function message(erreurs) {
if (erreurs==0) {
alert(messageTrèsbon[Math.floor(Math.random()*messageTrèsbon.length)]);
}
if (erreurs==1) {
alert(messageBon[Math.floor(Math.random()*messageBon.length)]);
}
if (erreurs==2) {
alert('Essaie encore !');
}
if (erreurs==3 || erreurs==4){
alert('Concentre-toi !');
}
if (erreurs==5 || erreurs==6){
alert('Alerte rouge !');
}
}

function niveauSuivant() {
if (erreurs==0) {
self.location = 'déclinaisondominussingulier.html'
}
if (erreurs>=1) {
alert("Réussis déjà ce niveau avant de passer au suivant.")
}
}

let valeur;
if (document.getElementById("choix1").checked) {
valeur = document.getElementById("choix1").value;
}
if (document.getElementById("choix2").checked) {
valeur = document.getElementById("choix2").value;
}
if (document.getElementById("choix3").checked) {
valeur =document.getElementById("choix3").value;
}

function verif() {
erreurs=0;
if (valeur!="rosae") erreurs++;
message(erreurs);
}


</script>

</head>

<body>

<header>

<div class="barre"></div>


<div class="container">
<h1><em>Méthode interactive de latin</em></h1>
<h2>Première déclinaison : rosa, ae, f. : la rose</h2>
</div>

</header>


<main>

<img class="displayed" src="rose.jpg" width="" =150 height=225>

<div class="container">

<FORM NAME="form">
<hr />

Le nominatif pluriel
<input type=radio id=choix1 name=choix value=rosae> rosae
<input type=radio id=choix2 name=choix value=rosas> rosas
<input type=radio id=choix3 name=choix value=rosarum> rosarum
<hr />
<BR>
<DIV ALIGN=center>
<INPUT TYPE=button VALUE="Vérifier" ONCLICK="verif()"></INPUT>
</DIV>
<input type="button" class="bouton" onclick="niveauSuivant();" value="Passer au niveau suivant !">
<br><br>
<a href ="Accueil du site.html">Retour à l'accueil</a>
</FORM>
</main>

<footer>
<div class="container">
<p>© Maxime Sanous 2020</p>
</div>
</footer>

</body>

</div>
</html>


Voici le code et un grand merci pour toute aide. Je rame...

1 réponse

Messages postés
1
Date d'inscription
mercredi 15 avril 2020
Statut
Membre
Dernière intervention
16 avril 2020

Bonsoir,

En fait, j'ai cherché et cherché encore et j'ai cherché encore et j'ai trouvé une solution...

La voici, la voilà...

Elle pourra peut-être un jour servir un autre débutant...


<!DOCTYPE html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Latin : la première déclinaison au pluriel</title>
<meta name="description" content="La première déclinaison au pluriel en latin. Méthode interactive de latin : testez vos connaissances.">


<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="https://fonts.googleapis.com/css2?family=Baloo+Thambi+2&family=Caveat+Brush&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<style type="text/css">
html
{
font-size: 100%
}
body
{
padding: 1em;
font-size: .85em;
font-family: 'Baloo Thambi 2', cursive;
}
h1,h2
{
max-width:600px;
margin:0 auto 15px;
text-align:center;
font-family: 'Caveat Brush', cursive;
}
h1
{
font-size:28px;
color: white;
background: -webkit-linear-gradient(top left, black, green);
border-radius: 10px;
}
h2
{
font-size:18px;
background:#fff;
}
ol, ul, li {
padding: 0;
margin: 1em;
}
img.displayed {
border-radius: 25px;
display: block;
margin-left: auto;
margin-right: auto;
}
input {
width: 160px;
background: burlywood;
border-radius: 5px;
}
label{
width:100px;
font-weight:bold;
margin-right:10px;
text-align:left;
}
form{
margin:0 auto;
background: -webkit-linear-gradient(top left, #800080,#FFFFFF);
background: -o-linear-gradient(bottom right, #800080,#FFFFFF);
background: linear-gradient(to bottom right, #800080,#FFFFFF);
border-radius: 25px;
padding:10px 20px;
width:75%;
text-align:center;
min-width:640px;
}
ul{
padding:0
}
li{
list-style-type:none
}
.barre{
width:100%;
height:2px;
background: -webkit-linear-gradient(to right, lightblue,burlywood);
background: -o-linear-gradient(to right, lightblue, burlywood);
background: linear-gradient(to right, lightblue, burlywood);
position:absolute;
left:0;
top:75px;
z-index:-1;
}
footer{
text-align:center;
}
</style>

<script type="text/javascript">

let messageTrèsbon = new Array()
messageTrèsbon[0] = 'Super !';
messageTrèsbon[1] = 'Très bien !';
messageTrèsbon[2] = 'Très beau travail !';
messageTrèsbon[3] = 'Génial !';
messageTrèsbon[4] = 'Un parcours sans faute !';
messageTrèsbon[5] = 'Optime !';
messageTrèsbon[6] = 'Cool ! Parfait !';
let messageBon = new Array()
messageBon[0] = 'Pas loin du compte !';
messageBon[1] = 'À un près, ça fait rager, hein ?';
messageBon[2] = 'R-1, dommage !';



function message(erreurs) {
if (erreurs==0) {
alert(messageTrèsbon[Math.floor(Math.random()*messageTrèsbon.length)]);
}
if (erreurs==1) {
alert(messageBon[Math.floor(Math.random()*messageBon.length)]);
}
if (erreurs==2) {
alert('Essaie encore !');
}
if (erreurs==3 || erreurs==4){
alert('Concentre-toi !');
}
if (erreurs==5 || erreurs==6){
alert('Alerte rouge !');
}
}

function niveauSuivant() {
if (erreurs==0) {
self.location = 'déclinaisondominussingulier.html'
}
if (erreurs>=1) {
alert("Réussis déjà ce niveau avant de passer au suivant.")
}
}

function verif() {
erreurs=0;
if (document.getElementById("choix2").checked || document.getElementById("choix3").checked) erreurs++;
message(erreurs);
}


</script>

</head>

<body>

<header>

<div class="barre"></div>


<div class="container">
<h1><em>Méthode interactive de latin</em></h1>
<h2>Première déclinaison : rosa, ae, f. : la rose</h2>
</div>

</header>


<main>

<img class="displayed" src="rose.jpg" width="" =150 height=225>

<div class="container">

<FORM NAME="form">
<hr />

Le nominatif pluriel
<input type=radio id=choix1 name=choix value=rosae> rosae
<input type=radio id=choix2 name=choix value=rosas> rosas
<input type=radio id=choix3 name=choix value=rosarum> rosarum
<hr />
<BR>
<DIV ALIGN=center>
<INPUT TYPE=button VALUE="Vérifier" ONCLICK="verif()"></INPUT>
</DIV>
<input type="button" class="bouton" onclick="niveauSuivant();" value="Passer au niveau suivant !">
<br><br>
<a href ="Accueil du site.html">Retour à l'accueil</a>
</FORM>
</main>

<footer>
<div class="container">
<p>© Maxime Sanous 2020</p>
</div>
</footer>

</body>

</div>
</html>