Discussion :

[radjiv97441]

Bonjour j'affiche une table de multiplication vide, et si l'élève clique sur une case (il cherche par exemple 18) j'affiche le résultat par un flip, de plus si le résultat est faux, je reflippe et je mets une croix sinon je garde la bonne valeur par une case verte. Je ne vois pas comment je vais faire ce flip.

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
<style>
.highlight {background-color:black;}
.tblitem{margin: 0.06rem 0.06rem;width: 2rem;height: 2rem;  color: white;font-weight: 500;  border-radius: 0.12rem;box-shadow: 0 0 0.6rem 0.15rem; text-align: center; line-height: 1.6rem; font-size:1.4rem;background-color:rgba(63, 81, 181, 0.5);}
.tblheader{margin: 0.06rem 0.06rem;width: 2rem;height: 2rem;  color: white;font-weight: 500;  border-radius: 0.12rem;box-shadow: 0 0 0.6rem 0.15rem; text-align: center; line-height: 1.6rem; font-size:1.4rem;background-color:#5698a9;}
</style>
<div id="defitablo" data-resultat="18"></div>
<script>
function ClickSurCase(el){
 el["textContent"] = $(el).attr("data-val");
 if($(el).attr("data-val") == $(el).attr("data-resultat")) console.log("resultat juste");
}
function ConstruireDefi(){
 result=[];
 result[0]='<tr><td class="tblheader">×</td>';
 for(let i=1;i<10;i++){result[0] +='<td class="tblheader">'+i+'</td>';result[i] ='<tr><td class="tblheader">'+i+'</td>';
   for(let j=1;j<10;j++) result[i] +='<td class="tblitem" data-num="'+i+';'+j+'" data-val="'+(i*j)+'"></td>';
   result[i] +='</tr>';
 }
 result[0] +='</tr>';
 $("#defitablo").html('<table>'+result.join("")+'</table>');
 $('.tblitem').on('mouseover', function() {$(this).closest('tr').addClass('highlight');$(this).closest('table').find('.tblitem:nth-child(' + ($(this).index() + 1) + ')').addClass('highlight');});
 $('.tblitem').on('mouseout', function() {$(this).closest('tr').removeClass('highlight');$(this).closest('table').find('.tblitem:nth-child(' + ($(this).index() + 1) + ')').removeClass('highlight');});
 $('.tblitem').on('mousedown touchend', function() {ClickSurCase(this);});
}
$(document).ready(ConstruireDefi);
</script>

Merci d'avance pour vos aides.

[mathieu]

j'ai trouvé quelque chose là mais je n'arrive pas l'utiliser :
https://www.w3schools.com/howto/howto_css_flip_box.asp

peut-être que cette question à plus sa place sur le forum css.