Affichage successif d'éléments

**mlihawi** · 12/03/2021, 08h56

Bonjour

Je suis un debutant en js et html, et je vourdrais créer un script comme le lien suivant (https://mathjax.github.io/MathJax-de...eal-steps.html) sans css pour l'integrer dans mes activités Moodle (qui n'aime pas le css).mon objectif est d'integrer ce script pour montrer des process de résolutions étape par étape avec des bouton suivant et pécédent a fin que l'apprenant arrive à assimiler la procédure.
Je vous remercie

Cordialement HILMI

**javatwister** · 12/03/2021, 14h30

Bonjour,

De fait, tu peux "tout faire" sans une once de css mais c'est tout de même inhabituel:

Imaginons ton exercice:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="dev">
	<div>(x+1)² =</div>
	<div>
		<div>(x+1)(x+1)</div>
		<div>x(x+1)+x(x+1)</div>
		<div>(x²+x)+(x+1)</div>
		<div>x²+(x+x)+1</div>
		<div>x²+2x+1</div>
	</div>
	<div>
		<input type="button" id="next" value="Show next step" />
		<input type="button" id="back" disabled="disabled" value="Reset" />
	</div>
</div>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
document.addEventListener("DOMContentLoaded",()=>{
	const dev=document.querySelector("#dev"),
	res=dev.querySelectorAll("div");
	dev.style.cssText="display:flex;justify-content:flex-start;margin:20px";
	res.forEach((v,i)=> {if(i>1 && i<res.length-1) v.style.cssText="margin:0px 20px 5px 5px;visibility:hidden"});
 
	document.querySelector("#next").addEventListener("click",e =>{
		document.querySelector("#back").disabled=false;
		let hide= Array.from(res).find(v=>v.style.visibility=="hidden")
		if(hide){
			hide.style.visibility="visible";
			if(res[res.length-2].style.visibility=="visible"){
				e.target.disabled=true
			}
		}
	})
 
	document.querySelector("#back").addEventListener("click",e =>{
		res.forEach((v,i)=> {if(i>1 && i<res.length-1) v.style.visibility="hidden"});
		e.target.disabled=true;
		document.querySelector("#next").disabled=false;
	})
})

Exemple: http://javatwist.imingo.net/calpasapas.htm

**NoSmoking** · 12/03/2021, 17h02

Bonjour,

sans css pour l'integrer dans mes activités Moodle

je me demande bien ce que tu attends de nous, il te faut le faire dans l'environnement Moodle et avec ses spécificités.

Sinon oui en HTML-CSS-JS c'est complétement trivial, et je dirais même un presque classique

**mlihawi** · 12/03/2021, 20h39

Je vous remérci pour votre réponse,
Moodle est bridé, je peu utiliser que du html et js avec le style bootsrap dans mes pages web et mes activités (cours ou exercices), ce que j'attend de vous c'est ce coup de main sympa je vous remerci encore une fois,
Problème (voir image) je me demande si placer les élèments "etape i " dans une liste en js au lieu de div

Nom : 001349-Prévisualisation de la question*_ 00_Brouillon les racines d’un polynôme 2D.jpg
Affichages : 316
Taille : 74,9 Ko

Nom : 001349-Prévisualisation de la question*_ 00_Brouillon les racines d’un polynôme 2D.jpg
Affichages : 316
Taille : 74,9 Ko

**javatwister** · 12/03/2021, 22h11

Envoyé par mlihawi

je me demande si placer les élèments "etape i " dans une liste en js au lieu de div

Aucun problème supplémentaire, c'est exactement le même principe:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Calculs pas à pas</title>
</head>
 
<body>
 
<div id="dev">
	<div>(x+1)² =</div>
	<ul id="liste">
		<li>(x+1)(x+1)</li>
		<li>x(x+1)+x(x+1)</li>
		<li>(x²+x)+(x+1)</li>
		<li>x²+(x+x)+1</li>
		<li>x²+2x+1</li>
	</ul>
	<div>
		<input type="button" id="next" value="Show next step" />
		<input type="button" id="back" disabled="disabled" value="Reset" />
	</div>
</div>
 
<script>
 
document.addEventListener("DOMContentLoaded",()=>{
// conteneur, liste et items
        const dev=document.querySelector("#dev"),
        ul=document.querySelector("#liste"),
        res=dev.querySelectorAll("#liste li");
        
// définition du style des éléments précédents
        dev.style.cssText="display:flex;justify-content:flex-start;margin:20px";
        ul.style.cssText="list-style-type:none;margin:0px;padding:0px";
        res.forEach(v => v.style.cssText="margin:0px 20px 5px 5px;visibility:hidden");
 
// activation de la visibilité des éléments de la liste en cliquant sur le bouton
        document.querySelector("#next").addEventListener("click",e =>{
                document.querySelector("#back").disabled=false;
                let hide= Array.from(res).find(v => v.style.visibility=="hidden")
                if(hide){
                        hide.style.visibility="visible";
                        if(res[res.length-1].style.visibility=="visible"){
                                e.target.disabled=true
                        }
                }
        })
 
// reset
        document.querySelector("#back").addEventListener("click",e =>{
                res.forEach(v => v.style.visibility="hidden");
                e.target.disabled=true;
                document.querySelector("#next").disabled=false;
        })
})
</script>
 
</body>
</html>

**mlihawi** · 12/03/2021, 23h05

Merci javatwister
je me suis mal exprimé, pour moi une liste veut dire un tableau en javascript
comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var Aetape =["(x+1)²","(x+1)(x+1) ","x(x+1)+x(x+1) ","(x²+x)+(x+1) ","x²+2x+1 "] ;
 for ( var i=1;i<length.Aetape;i++){ je ne sais pas faire la suite };

j'ai constaté avec div ou liste (html) il n'y a pas d'interactivité, les boutons next et previous ne fonctionnent pas, c'est pour cela, je pense qu'il faut tout faire en javascript.
merci encore une fois

**javatwister** · 13/03/2021, 00h23

Envoyé par mlihawi

j'ai constaté avec div ou liste (html) il n'y a pas d'interactivité, les boutons next et previous ne fonctionnent pas

Je t'ai donné un exemple...

Je ne comprends pas ce que tu veux dire.

Envoyé par mlihawi

tout faire en javascript

Quel est le sens de cette expression???

**mlihawi** · 13/03/2021, 14h03

Bonjour javatwister

ce que vous m'avez proposé ne répond pas aux attentes de l'activité (voir l'image de l'exercice), le faite de placer les étapes de la démonstration dans des balises html (div ou liste) n'active pas le boutton Show next step,ni reset d'ou l'affichage en bloc de toute les étapes.
Je pense que si vous placez les étapes dans un tableau en js (type var Array =["(x+1)²","(x+1)(x+1) ","x(x+1)+x(x+1) ","(x²+x)+(x+1) ","x²+2x+1 ", ..]

et faire de sorte d'afficher chaque élement du tableau en cliquant sur le boutton suivant / précedent , le tout est ecrit en javascript uniquement. je pense moodle peut le prendre en charge, c'est à essayer...
j'espère que je me suis fait comprendre cette fois ci.
Nom : 001350-Prévisualisation de la question*_ 00_Brouillon les racines d’un polynôme 2D.jpg
Affichages : 307
Taille : 98,8 Ko

Nom : 001350-Prévisualisation de la question*_ 00_Brouillon les racines d’un polynôme 2D.jpg
Affichages : 307
Taille : 98,8 Ko

merci encore une fois

Cordialement HILMI

**javatwister** · 13/03/2021, 18h18

le faite de placer les étapes de la démonstration dans des balises html (div ou liste) n'active pas le boutton Show next step,ni reset d'ou l'affichage en bloc de toute les étapes.

Je ne comprends toujours pas; ou alors, j'ai un navigateur magique et un cerveau hermétique à javascript;

**mlihawi** · 14/03/2021, 00h32

voici un début de programme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<script>
       var DesEtapes = ['(x+1)²',"(x+1)(x+1)","x(x+1) + 1(x+1)","(x²+x) + (x+1)","x² + (x + x) + 1","x² + 2x + 1"];
 
  for(i=0; i<DesEtapes.length;i++) {
    document.write("Etape "+i+" => "+DesEtapes[i]+"<br/>");
  }
 
 </script>

si tu arrives à placer les boutons suivant et précédent pour afficher/cacher chaque élément par ligne et le tour est joué

**mathieu** · 14/03/2021, 10h17

je ne connais pas bien moodle, à quel endroit de l'activité voulez vous afficher ces étapes ?

**javatwister** · 14/03/2021, 10h40

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
for(i=0; i<DesEtapes.length;i++) {
    document.write("Etape "+i+" => "+DesEtapes[i]+"<br/>");
  }

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Calculs pas à pas</title>
</head>
 
<body>
 
<div id="dev">
	<div></div>
	<ul id="liste"></ul>
	<div>
		<input type="button" id="next" value="Show next step" />
		<input type="button" id="back" disabled="disabled" value="Reset" />
	</div>
</div>
 
<script>
 
document.addEventListener("DOMContentLoaded",()=>{
// conteneur + liste
        const dev=document.querySelector("#dev"),
        ul=document.querySelector("#liste");
 
// insertion des étapes du calcul dans la liste
        const calcul=["(x+1)²","(x+1)(x+1)","x(x+1) + 1(x+1)","(x²+x) + (x+1)","x² + (x + x) + 1","x² + 2x + 1"];
        dev.firstElementChild.textContent=calcul[0]+" = ";
        calcul.forEach((v,i)=>{
                if(i>0){
                        let li=document.createElement("li");
                        li.textContent=v;
                        ul.append(li);
                }
        })
        
// items
        const res=dev.querySelectorAll("#liste li");
 
// définition du style des éléments précédents
        dev.style.cssText="display:flex;justify-content:flex-start;margin:20px";
        ul.style.cssText="list-style-type:none;margin:0px;padding:0px";
        res.forEach(v => v.style.cssText="margin:0px 20px 5px 5px;visibility:hidden");
 
// activation de la visibilité des éléments de la liste en cliquant sur le bouton
        document.querySelector("#next").addEventListener("click",e =>{
                document.querySelector("#back").disabled=false;
                let hide= Array.from(res).find(v => v.style.visibility=="hidden")
                if(hide){
                        hide.style.visibility="visible";
                        if(res[res.length-1].style.visibility=="visible"){
                                e.target.disabled=true
                        }
                }
        })
 
// reset
        document.querySelector("#back").addEventListener("click",e =>{
                res.forEach(v => v.style.visibility="hidden");
                e.target.disabled=true;
                document.querySelector("#next").disabled=false;
        })
})
</script>
 
</body>
</html>

Affichage successif d'éléments

JavaScript

Discussions similaires

Partager

Partager