Jeux : texte à trou

[lefabdu51]

Et ceci est le code reçu par le navigateur:

<div class="gbs3"><form action="http://localhost/j3/index.php/fr/?option=com_chronoforms5&chronoform=testformulaire &event=submit" enctype="multipart/form-data" method="post" name="testformulaire" id="chronoform-testformulaire" class="chronoform form-horizontal"><p>Voilà la liste des mots qu’il va falloir placer correctement :</p>
<p>
sauvage, des échanges, industriel, plantation, écosystèmes naturels, naturellement, un transport moderne, mondialisés, souveraineté alimentaire, le juste prix, exode, bidonvilles, l’agriculture paysanne, préserver, plan local, des récoltes, la déforestation, climatique, climatiques, négocier, valeur</p>

<p>L’origine de la pandémie est situé est située en Chine. L’Homme empiète sur les milieux "<input name="champ1" id="champ1" size="6" value="" placeholder="" class="form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />".et le virus circule par la mondialisation "<input name="champ2" id="champ2" size="6" value="" placeholder="" class="form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />". Pour nourrir les populations le modèle retenu de l’élevage "<input name="champ3" id="champ3" size="6" value="" placeholder="" class="form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />" et son pendant agricole dit de "<input name="champ4" id="champ4" size="6" value="" placeholder="" class="form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />"détruisent les "<input name="champ5" id="champ5" size="6" value="" placeholder="" class="form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />".</p>
<p>Second paragraphe. Les champs peuvent être insérés de la même manière que pour le premier.</p>
<input name="button2" id="button2" type="submit" value="Envoyer vos réponses" class="btn btn-default form-control A" style="" data-load-state="" /></form><p class="chrono_credits"><a href="http://www.chronoengine.com" target="_blank">Powered by ChronoForms - ChronoEngine.com</a></p></div>

[Eddy.vh]

J'ai pondu un truc qui me plaît bien, comme je le voulais avec drag and drop de texte vers les emplacements, je le placerai sur mon site officiel et vous le présenterai.
Le comptage des points se fait déjà (1 point par mot bien placé) et je dois encore faire la page qui l'affichera avec le texte entré et le texte correct.

C'était un chouette exercice.

[phelibre]

Merci Eddy et lefabdu51, vos réponses sont très intéressantes mais demandent des compétences pour les appliquer !
Je ne souhaite pas que l'internaute connaisse son résultat, c'est un jeux avec bon d'achat. Donc simplement, il place les mots comme il le souhaite ajoute son @ courriel et valide, rien de plus ...
Je regarde de plus près demain ... et je reviendrai vers vous vraisemblablement

[Eddy.vh]

Dans ce ce cas, ce serait +- facile.

[Eddy.vh]

Ah mer**, le jeu fonctionne super sur mon site de teste et pas sur mon site officiel.
Je tente de déboguer et repasse vous dire tout.

[lefabdu51]

tu devrais te concentrer sur les réponses d'eddy, il utilise le même outil que toi..et moi pas.
Moi c'est juste quelques reflexions sur ta question..
Et vu que j'utilise un autre outil, tu n as pas besoin d'avoir des doublons dans les fonctionnalités.
Et c est aussi une reflexion a ce eddy a dit en parlant de la difficulté à mélanger texte et champs.. C'est ce qui m a pousser à poser du code.

[Eddy.vh]

cavo789 et aux autres intéressés.

Voici ce fameux formulaire avec texte à trous. Il suffit de placer les mots par glisser / déposer aux emplacements prévus.
Valider le formulaire pour voir le résultat.

[cavo789]

Bravo Eddy !

Note mais tu dois le savoir : drag and drop non fonctionnel sur smartphone. (ou alors il y a une astuce qui m'est inconnue)

[Eddy.vh]

Il y a ien une astuce qui t'est inconnue.
Place le doigt sur un mot et patiente un très court instant, tu verras que le texte se "charge" sous le doigt. Seulement alors tu peux placer ton texte.
Il y a toutefois un inconvénient, pas insurmontable mais ennuyeux, placer un mot dans un emplacement qui n'apparait pas encore à l'écran. On ne peut descendre dans la page avec le texte chargé.
l'astuce est alors de poser le texte dans un emplacement visible, "scroller" la page, reprendre le mot pour le placer à son emplacement alors visible.

[cavo789]

Youhou !!!



Super travail Eddy. Bravo.

[Eddy.vh]

Merci Christophe

[lomart]

Félicitation Eddy

Travail remarquable

Si je peux ajouter ma pierre à ton oeuvre.
Ce petit bout de CSS transforme les mots en jetons. Cela me semble plus intuitif pour les joueurs

span[id^="drag"] {
border: 1px solid grey;
padding: 0 2px;
border-radius: 4px;
background: #f8f8f8;
cursor: pointer;
}

[phelibre]

Mille mercis Eddy, c'est nickel

[Eddy.vh]

Merci Loic.

En effet, le coup du jeton est une bonne idée. C'est en place.