[RÉGLÉ] Jeux : texte à trou

[phelibre]

Bonjour,

Je suis un "bénévole webmaster" du site Artisans du Monde La Rochelle . C'est la quinzaine du commerce équitable et j'aimerai proposer depuis ma newsletter (AcyMailing) un jeux avec bon d'achat pour les gagnants. Dans un premier temps je pensai utiliser BreezingForm déjà utilisé pour le "Panier Alimentaire" et autres. Mais il me semble que ce n'est pas adapté pour proposer un texte avec des blancs et proposer une liste de noms pour remplir les blancs. Je pensais proposer la liste de noms dans la page initiale. Il faudrait customiser BreezingForm pour que les zones de saisies soit dans le texte! Mais là je ne sais pas faire

Pouvez-vous, m'éclairer ?
Cordialement

[Eddy.vh]

Hello,
Comme je le disais dans nos échanges par e-mail, il faut que je teste si c'est faisable. Ce doit l'être sans doute (enfin, je pense et ai même une idée) mais il faut une dose de javascript et une mise en page spéciale.

Mais il se peut qu'il existe une extension prévue. À voir.

[Eddy.vh]

phelibre

Je vous disais que je ne doutais pas que BF puisse faire ça. J'ai fait un petit exemple et vous ai envoyé un e-mail.

[cavo789]

phelibre

Je vous disais que je ne doutais pas que BF puisse faire ça. J'ai fait un petit exemple et vous ai envoyé un e-mail.

Ben quoi phelibre est favorisé ? Et nous ???

[Eddy.vh]

Tu veux voir l'exemple ?
Ce n'est qu'une ébauche loin d'être finalisée sur un site de test qui doit rester dans l'ombre.
Si cest intéressant pour d'autres je placerai l'exemple sur BF.eddy-vh.com et donnerai l'url publique.

[cavo789]

Salut Eddy

Oui c'était un clin d'oeil (perso je n'en ai pas besoin) mais vu qu'il s'agit d'une question posée sur le forum et que, peut-être qu'un jour quelqu'un serait à la recherche de quelque chose dans le même genre, si tu t'es donné la peine de chercher et proposer une solution, oui, mon clin d'oeil visait à en faire profiter les générations futures

Bonne soirée.

[Eddy.vh]

Je publierai le résultat prochainement sur mon site et passerai le signaler.

[phelibre]

Je mets les choses à plat Eddy, j'ai également sollicité le forum au sujet de mon problème car l'union fait la force ... J'ai testé ton lien confidentiel, c'est bien, mais le texte du jeux est franchement plus long ... À la réflexion si je pouvait agrandir la première colonne, je pourrait mettre chaque phrase avec un blanc sur le mot à compléter du style " ------" et ensuite dans un rectangle de 200px (en gros ) l'internaute saisirait le mot de son choix. Maintenant faut pouvoir agrandir suffisamment la première colonne !

Merci

NB : voilà en gros le texte :

Voilà la liste des mots qu’il va falloir placer correctement :

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

L’origine de la pandémie est situé est située en Chine. L’Homme empiète sur les milieux " ------" et le virus circule par la mondialisation " ------" . Pour nourrir les populations le modèle retenu de l’élevage " ------" et son pendant agricole dit de " ------" détruisent les " ------" . Alors que l’élevage traditionnel et l’agriculture paysanne les intègrent " ------" . Le mode de production agricole intensif ne fonctionne que par " ------" devenu indispensable pour les échanges " ------" . Une des conséquences est la mise en cause de la " ------" le coût des productions mondialisées empêche de rémunérer les paysans à la hauteur de leur travail : c’est " ------" L’ " ------" subit entraine les paysans vers les " ------"
Il devient urgent de soutenir " ------" afin de " ------" les écosystèmes sauvages et de réorganiser les échanges sur un " ------"
Les effets du changement climatiques entrainent une perte " ------" qui est compensée soit par une volonté de produire plus et dans ce cas c’est " ------" , ce qui augmente la crise " ------" ou bien l’abandon des cultures !
Les produits bio et équitables et l’artisanat certifié équitable réduisent les impacts sociaux et " ------" Ils permettent également des rendre les producteurs et artisans plus forts pour " ------" les prix et obtenir une meilleure répartition de la " ------" tout en améliorant leur résilience.

[Eddy.vh]

3 mots, 20 mots, le principe est le même, seul le script s'allonge.

Bonne nuit.

[lefabdu51]

bonjour,
pourquoi ne pas mettre la liste des mots dans des champs HTML de type select ? et par défaut, tu met une chaîne comme ceci: __________
Il apparaitraient alors sous forme de liste et ensuite un simple test en fonction des choix....
tu ne met rien dans le label du champ et comme ça tu auras bien texte et champ cote à cote comme dans ton exemple.
Je ne connais pas bf, donc je ne sait pas si tu peux y passer du code personnalisé de ce type :

<p>
[I]L’origine de la pandémie est situé est située en Chine. L’Homme empiète sur les milieux "<select id="champ1"><option value='0'>mot1</option><option value='2'>mot2</option></select>" et le virus circule par la mondialisation "<select id="champ2"><option value='0'>mot1</option><option value='2'>mot2</option></select>" </p>[/I]

ou tu peux utiliser un champ texte, avec comme valeur par défaut: _______ et utiliser une fonction javascript pour vérifier que le mot est bien dans la liste des mots devant être entrés.
Et le résultat est determiné à la soumission... Avec Chronoforms c'est possible de le faire aussi, mais les champs ne peuvent être crées avec l'interface, mais uniquement en tilisant un code personnalisé.

<p>
[I]L’origine de la pandémie est situé est située en Chine. L’Homme empiète sur les milieux "[/I]<input type="text" id="champ1" name="champ1" placeholder="__________" required size="10">[I]" et le virus circule par la mondialisation "[/I]<input type="text" id="champ2" name="champ2" placeholder="__________" required size="10">[I]" </p>[/I]

Le truc étant que tu as une balise form qui entoure ton texte, donc c'est pour ça que tu peux noyer tes champs dans ton texte.
Et le traitement des valeurs entrées se fait dans l'événement onsubmit ou dans un événement intérmédiaire, l'événement onsubmit ne servant qu'a l'affichage du résultat.

[Eddy.vh]

BF permet le code personnalisé, il est même possible d'introduire une option de drag and drop du texte dans les emplacements prévus. Avec JavaScript, c'est personnalisable quasiment sans limite.

Par contre, il faut garder la structure (cachée) du formulaire et y envoyer les réponses indiquées dans les emplacements.

Je vois pour faire un exemple ± complet ce weekend, ça me fera un exercice de choix !

[lefabdu51]

pas de soucis.
En bas, un champ submit avec comme label "envoyez vos réponses" serviras bien pour envoyer les données du formulaire entrées par l'utilisateur.

Le traitement en lui même est très simple
en php c est une base de boucle if.

if ($champ1 === 'XXX') {
$total = $total +1;
}
if ($champ2 === 'YYY') {
$total = $total +1;
}
// traitement du resultat
// si réponses ok et il reste des bons d achat
if ($total === 'max reponse' && '$bons > 0){
echo $vous avez gagné
}
 //et ensuite une série de boucle if pour traiter les résultats perdants avec une message en fonction du nombre de bonnes réponses.
if $total < 5 {
echo 'pas fameux. seulement '. $total . 'de bonnes réponses.';
}

Le code ci dessus est juste ce que je ferais pour traiter les résultats...

Pour moi, c'était juste histoire de donner une piste sur l'organisation du formulaire et le traitement des données pour ceux qui liront le post dans quelques temps. Et c'était aussi histoire de voir comment traiter la problématique. Il n y a rien de réellement compliqué, le tout est de bien s'organiser.

S'il faut mettre les champs au milieu du formulaire et qu ils ont un affichage de type block ou grid (flex), tu peux entourer tes champs avec une balise span class="champ_formulaire" et mettre dans tes css .champ_formulaire: display:inline.

Eddy.vh :Vu que tu vas poser un exemple, aucun besoin d approfondir...

[Eddy.vh]

Le traitement en lui-même est très simple pour un développeur, pas forcément pour monsieur tout le monde. Je ne suis pas dev et je n'ai que quelques notions de toute première base en php et / ou JavaScript et encore, juste sous BF parce que je suis un peu habitué à sa bibliothèque.

En fait, il n'est pas envisageable facilement de déplacer les champs des formulaires pour les placer où on veut.

Je vois ça comme suit :

• La liste des mots en haut.
• Le texte avec des span vides aux emplacements des mots à insérer (ou glisser / déposer, ou etc.). Lors de l'écrit ou la dépose, envoyer le contenu saisi du span, en temps réels, dans un champs BF correspondant afin d'en relever les réponses et calculer les résultats si besoin.

On peut, après la validation du formulaire, envoyer le texte rempli et le texte comme il doit être par e-mail. Il est possible aussi de le présenter dans la page de remerciement mais c'est une autre paire de manches.

[lefabdu51]

Moi non plus, je ne suis pas développeur mais admin réseau.
Les compétences que j'ai acquises en dev ne sont que le résultat de ma curiosité et de mes lectures ici. J 'ai bien progressé en POO grace à Joomla et aux forums.

Et vu que l'on utilise pas les mêmes outils, encore moins évident de se comprendre.
Ci dessous la procédure chronoforms.
Je n'utilise pas de javascript pour gérer les champs.

[lefabdu51]

Pour info:
Eddy, ca ne t empèches pas d'utiliser tes outils et de sortir ton résultat.
Sous Chronoforms, j'ai crée un champ de type input text et je l'ais configuré.
J'ai obtenu le code ci dessous en allant dans l'onglet code de l'éditeur de formulaire et je l'ais adapté.

<div class="form-group gcore-form-row" id="form-row-champ1"><div class="gcore-input gcore-display-table" id="fin-champ1"><input name="champ1" id="champ1" value="" placeholder="" class="form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div>
et le bouton submit de mon formulaire.
<div class="gcore-input gcore-display-table" id="fin-button2"><input name="button2" id="button2" type="submit" value="Envoyer vos réponses" class="btn btn-default form-control A" style="" data-load-state="" /></div></div>

Chaque champ est requis et ne peux rester sans réponse.
j'ai supprimé les deux div entourant chaque champ et je les ais remplacé par le texte.
J'ai réutilisé le même code en incrémentant le nom et l'id du champ de 1. Le nom sert pour enregistrer les données du formulaire et l'id pour les css.
Les deux doivent être uniques pour chaque input.
J'ai retravaillé le code en ajoutant le texte via notepad++ et en supprimant les divs autour des champs. Ce qui m'as donné le code ci dessous:

<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="" />

J'ai passé l'onglet code en mode custom, j'ai supprimé le code existant (qui m'a permis de paramétrer mes champs) et j'ai collé le code retravaillé.

une fois ceci fait, j'ai enregistré mon formulaire.
Les autres manipulations sont à faire dans l'onglet setup.
C'est dans cet onglet que l'on vas gérer les éléments.
Dans l'événement onload, en premier, on va ajouter un événement load css, pour charger le code css du formulaire.
Dans cette action, le code est à ecrire dans le premier champ.

#champ1, #champ2, #champ3, #champ4, #champ5 { display:inline-block;height:24px;}

inline-block, pour éviter que cela déborde de la div conteneur si le champ est situé à droite et contre le bord de celle ci.
Et une hauteur de 24px pour rendre la hauteur moins disproportionnée.De base, les champs font 32px de hauteur.
Ensuite , j'ai ajouté une action html(render form) qui sert à afficher le formulaire.
J'obtient ceci.


Pour l'événement onsubmit, je ne peux pas te donner plus d'exemple que ceci car il manques plusieurs choses.
Le nombre, la valeur des bons d'achats en fonction du nombre de réponse.
Sous quelle forme ceux ci sont disponible ? Sont ils disponible sous forme de champs de la bdd spécifique ou dans une table spécifique ?
Que doit il se passer si plus aucun bon d'achat n'est disponible ?
Comment doivent être enregistrés les résultats ?
Qui doit recevoir un email quand un bon est gagné ?

Les données entrées papr l'utilisateur sont dans un tableau reprenant chaque nom de champ:
$form->data['champ1'], $form->data['champ2'], $form->data['champ3'], $form->data['champ4'],$form->data['champ5'].