Afficher une fenêtre en cliquant sur un bouton

Bonjour,
je voudrais créer un site d'apprentissage de l'espagnol. Avec des exercices et pour avoir les corrigés des exercices, on clique sur un bouton et la correction s'affiche dans une fenêtre.
Qu'est ce que vous me conseillerez comme système?
Du JS?
Ou avec la balise HOVER?

MErci pour votre aide.

Tu peux absolument le faire en JS, sans forcement avoir du PHP

Il suffirait d'avoir ton sytème de questions/réponse dans du xml (ou json) et de gérer avec du js.

@JENCAL : ça répond pas vraiment à la question

Salut abeille

Alors js ou hover pour l'affichage de la fenêtre ça va pas changer grand chose.. question d'aisance.

En revanche, comme le souligne JENCAL, si toutes tes réponses sont déjà dans la page, pas de soucis pas besoin de php, sinon si tu veux aller les chercher pour les afficher là il te faudra obligatoirement du JS avec de l'ajax pour aller chercher les infos a afficher.. quoi que "ou pas" tu peux aussi tout avoir dans ta page et aller chercher les infos au fur et à mesure du besoin

En fait tu donnes pas assez d'infos sur ce que tu veux faire

Bonjour,
merci pour vos réponses toujours ultra rapides!
(je suis sûr que vous finirez par répondre aux questions avant qu'on les aies posées!)
Donc voila ce que je voudrais faire:
1 + voici par exemple une page d'exercices
2 + on peut cliquer sur le bouton en haut à droite "LEXIQUE" et apparaît une fenêtre avec une liste de mots.
3 + on peut cliquer sur le bouton "corrections), apparaît une fenêtre avec la correction des exercices.

Je ne sais pas du tout quel langage je dois apprendre pour réaliser ceci.
Et si vous avez une idée meilleure que ça, n'hésitez pas à me le dire.
Merci pour vos explications.
Modifié par abeille (30 Jan 2018 - 11:05)

Ok

Bon ton lexique il peut être chargé en permanence... et vive le hover ou le onclick en js... comme tu le sens pas de différences

Pour la correction la vrai question est : est ce que la correction est toujours disponible ??? Genre pas besoin de faire l'exercice, il suffit de cliquer pour voir la correction ?
Si oui.. même chose que pour le lexique... tu peux tout charger dès l'arrivée dans la page et afficher en hover ou onclick c'est un choix...
Si non.. si il faut avoir répondu ou fait quelque chose dans ces cas là, il vaut mieux du js.

Ouf, merci pour la réponse pchldj ...
Ça me simplifie le travail.

Non, je ne veux pas que la correction de l'exercice dépende de ce que l'élève a écrit. Trop compliqué sinon.
Donc tu me conseilles le Hover ou le Onclick en JS.
Est ce que Onclick en JS donne plus de possibilités?

Merci pour ton aide.
Abeille

Le hover est à gérer en css, si tu maitrise bien le css pas de soucis.
Celui ci fera en sorte d'afficher le div avec ce qu'il contiendra.

Le onclick te permettra d'afficher le div avec ce qu'il contiendra en utilisant une fonction jquery par exemple div.show() (ce qui correspond à ajouter display:block au div)

pour l'utilisation d'affichage l'un n'avantage pas l'autre, en revanche le fait de le faire en JS te permettra plus tard éventuellement, de pouvoir travailler sur le contenu, sur la façon d'afficher, etc etc...

C'est clairement uen question de choix personnel selon le besoin et l'utilisation finale.

Enfin le fait de le faire en css n’empêchera pas de le transformer en JS plus tard si besoin et réciproquement

pchlj a écrit :
Le hover est à gérer en css, si tu maitrise bien le css pas de soucis.

Merci pour toutes tes explication, cela se précise.
Mais je viens de voir que Hover n'est pas fonctionnel pour les appareils tactiles... et je voudrais que les pages du site soient accessibles aussi aux portables, tablettes etc...
Donc JS?
A plus

Bonjour,

oui, hover n'est pas très pratique pour les tactiles. De plus c'est assez peu pratique à utiliser.

Un bouton qui montre/cache le contenu au clic sera bien plus adapté!

kustolovic a écrit :
Bonjour,

oui, hover n'est pas très pratique pour les tactiles. De plus c'est assez peu pratique à utiliser.

Un bouton qui montre/cache le contenu au clic sera bien plus adapté!

Merci kustolovic.
Quel type de bouton?

abeille a écrit :
Merci kustolovic.
Quel type de bouton?

N'importe quel type de button (input ou button) avec un événement derrière.

JENCAL a écrit :


N'importe quel type de button (input ou button) avec un événement derrière.

Merci ... mais je pense qu'on ne s'est pas compris.
je ne veux pas que l'internaute entre un contenu avec un Input.
je veux juste qu'en cliquant sur un bouton il s'affiche un tableau.
Hover n'est pas utilisable, parce que le tableau doit pouvoir contenir jusqu'à 1000 mots. (lexique).
Donc il faudra du JS??
merci pour votre patience.

Un bouton, c'est une balise <input type="button"> ou une balise <button>
La première existe depuis le début du HTML, la deuxième est plus récente et à recommander dans la plupart des cas.
Le hover n'a de sens que sur un appareil qui possède une souris ou un touchpad, donc un ordinateur. Si on veut que ça marche dans tous les cas, il est préférable d'utiliser quelque chose comme <button onclick="display('xxx')">
"display('xxx')" est une fonction JavaScript, donc, oui, on est conduit à utiliser le JavaScript, mais ce n'est pas très compliqué à faire tant que ce qu'on veut faire est simple, du genre afficher ou cacher une <div> ou une <img>
Ce qui est un peu plus compliqué, c'est de gérer une page avec plusieurs boutons et faire en sorte qu'il n'y ait au plus qu'un objet affiché à la fois.
Maintenant, beaucoup d'entre nous font ça tous les jours, et on doit sans doute trouver d'intéressants documents sur ce sujet.

Voilà,

par exemple avec une table copié/collée de wikipedia, ça pourrait donner qqch du genre:

https://codepen.io/anon/pen/KQpNYy

C'est un exemple ultrabasique, mais c'est l'idée générale.

Si c'est un exemple de "comment cacher une div" je peux te fournir cela :

https://codepen.io/JUSEN/pen/qxdRWz

Après je te renvoi à toutes les explications données précédemment !


P.S : L'exemple est moche, mais fonctionnel.

Un exemple: https://www.alma-musica.net/html/concerts.php
Dans cette page, les "boutons" sont des images miniatures des affiches de concerts.
En mode "avec souris" le fait de passer la souris sur la miniature fait apparaître l'affiche en grand, et elle disparaît quand la souris quitte la grande image.
En mode tablette ou mobile, la grande image apparaît quand on clique sur la miniature et disparait quand on clique sur la grande image.
Tout cela se fait par JavaScript et CSS: les actions "mouseover", "mouseout" et "click" déclenchent une fonction JavaScript qui modifie la classe de la balise <div> qui contient les deux images, et selon la classe, le CSS dit s'il faut ou non afficher la grande image.
Si je devais refaire cette page, je ferais sans doute quelque chose de plus simple.

JENCAL a écrit :
Si c'est un exemple de "comment cacher une div" je peux te fournir cela :

https://codepen.io/JUSEN/pen/qxdRWz

Après je te renvoi à toutes les explications données précédemment !


P.S : L'exemple est moche, mais fonctionnel.

adio Jencal,
un grand merci pour le code, c'est exactement ça que je voulais obtenir.
Juste un petit souci, lorsque la page s'affiche, il y a déjà les résultats à la question qui sont affichés et lorsqu'on clique sur "correction", ceux ci disparaissent.
C'est inversé!
Et je ne sais pas trop comment arranger ça.
Modifié par abeille (01 Feb 2018 - 07:20)