Affichage successif d'éléments

Version imprimable

12/03/2021, 08h56
mlihawi

Affichage successif d'éléments

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

Bonjour,

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

Imaginons ton exercice:

Code:

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:

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

12/03/2021, 17h02
NoSmoking

Bonjour,

Citation:

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 ;)
12/03/2021, 20h39
mlihawi

1 pièce(s) jointe(s)

Merci pour votre réponse

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

Pièce jointe 593304

Citation:

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:

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>

12/03/2021, 23h05
mlihawi
Merci javatwister
je me suis mal exprimé, pour moi une liste veut dire un tableau en javascript
comme
Code:

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
13/03/2021, 00h23
javatwister

Citation:

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.

Citation:

Envoyé par mlihawi

tout faire en javascript

Quel est le sens de cette expression???
13/03/2021, 14h03
mlihawi

1 pièce(s) jointe(s)

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.
Pièce jointe 593344
merci encore une fois

Cordialement HILMI
13/03/2021, 18h18
javatwister

Citation:

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;

voici un début de programme
Code:

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é

14/03/2021, 10h17
mathieu

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

Citation:

Code:

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

:vomi:

Code:

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>