nuancier

by spgoo

HTML

<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.js"></script>
		<link href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css" rel="stylesheet">
		<script type="text/javascript" charset="UTF-8" src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
		<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css" />
		<script type="text/javascript" id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"> </script>
		<script>
			window.WebFontConfig = {
				custom: {
					families: ['KaTeX_AMS', 'KaTeX_Caligraphic:n4,n7', 'KaTeX_Fraktur:n4,n7',
						'KaTeX_Main:n4,n7,i4,i7', 'KaTeX_Math:i4,i7', 'KaTeX_Script',
						'KaTeX_SansSerif:n4,n7,i4', 'KaTeX_Size1', 'KaTeX_Size2', 'KaTeX_Size3',
						'KaTeX_Size4', 'KaTeX_Typewriter'],
				}
			};
		</script>
		<script src="https://cdn.jsdelivr.net/npm/mathjs/lib/browser/math.js"></script>
	
		<div style="width:100%;text-align:center;">
			<div style='width:600px;'>
				<div id="box3" class="jxgbox" style="width:100%;height:420px;"></div>
				<input type="checkbox" id="radio_cas1" onclick="recharge();">Cas 1</input>
				<input type="checkbox" id="radio_cas2" onclick="recharge();">Cas 2</input>
				<input type="checkbox" id="radio_cas3" onclick="recharge();">Cas 3</input>
				<input type="checkbox" id="radio_cas4" onclick="recharge();">Cas 4</input>
				<input type="checkbox" id="radio_cas5" onclick="recharge();">Cas 5</input>
				<input type="checkbox" id="radio_cas6" onclick="recharge();">Cas 6</input>
				<input type="checkbox" id="radio_cas7" onclick="recharge();">Cas 7</input>
				<br/>
				<span id="comment_radio_cas1" style="display:none"></span>
				<textarea id="code_radio_cas1" cols=90 rows=10 style="font-size:10px;tab-size: 3;display:none"></textarea>
				<span id="comment_radio_cas2" style="display:none"></span>
				<textarea id="code_radio_cas2" cols=90 rows=10...

JavaScript

const associations={
	"radio_cas1": {"fct":"creation_rectangle_deforme",
	"Comments":"Cas 1: Création de l'objet avec les propriétés par défaut."},
	"radio_cas2": {"fct":"creation_rectangle_immobile",
	"Comments":"Cas 2: Création de l'objet avec les propriétés des points à fixed :true."},	
	"radio_cas3": {"fct":"creation_rectangle_mobile",
	"Comments":"Cas 3: Création de l'objet avec les propriétés des points à fixed :false. Résultat on peut déplacer les points, mais on déforme le rectangle"},
	"radio_cas4": {"fct":"creation_rectangle_mobile_2",
	"Comments":"Cas 4 : on définit une relation de dépendance entre les points. Tous dépendent des coorodnnées du premier. Maintenant on peut déplacer l'objet sans déformation."},	
	"radio_cas5": {"fct":"creation_rectangle_mobile_centre",
	"Comments":"Cas 5 : On ajoute un centre et on définit tous les autres à partir des coordonnées du centre."},
	"radio_cas6": {"fct":"creation_rectangle_mobile_centre_2",
	"Comments":"Cas 6 : Le centre permet de déplacer l'objet."},	
	"radio_cas7": {"fct":"creation_rectangle_mobile_centre_attrators",
	"Comments":"Cas 7 : Le centre permet de déplacer l'objet et une fois posé sur la grille, il est attiré par les attrateurs."}	
}

// recharge les différents éléments en fonction de la sélection 
const recharge=function() {
	// vérification des checkbox activés 
	chargement_board();
	creation_rectangle_acceuil_cercles();
	textAreas=document.querySelectorAll("textarea");
	textAreas.forEach((t)=>t.style.display="none");
	Spans=document.querySelectorAll("span");
	Spans.forEach((t)=>t.style.display="none");


	checkboxes=document.querySelectorAll("input[type=checkbox]");
	const selections= Object.values(checkboxes).filter((e)=>e.checked);
	selections.forEach((sel)=> {
		const comment=document.getElementById("comment_"+sel.id);
		comment.style.display="block";
		comment.innerHTML=associations[sel.id]["Comments"];
		const...