Commuter l’apostrophe dactylogr. en apostr. typogr. dans un formulaire

[Backeljau]

J’ai mis en ligne en 2005 un site d’exercices pour l’étude du français conçus avec HotPotatoes. Actuellement, le site comporte un millier de pages interactives. HotPotatoes est un magnifique logiciel libre.
Je voudrais cependant qu’une amélioration y soit apportée pour la langue française. Dans le formulaire de réponse (input ou textarea), l’apostrophe du clavier est «dactylographique» ['](\u0027).
Certes un clavier virtuel permet d’inclure le bon caractère dans le champ de la réponse, comme sur cette page pour les guillemets. Mais cette solution ne convient pas bien aux apostrophes, beaucoup plus nombreuses que les guillemets.
Or, les auteurs du logiciel semblent avoir cessé son développement.
Serait-il possible de construire un script qui remplace automatiquement lors de la frappe ['](\u0027) par [’](\u2019)? À ce propos, je mets en ligne une page comportant TOUT le code (et non un renvoi à un fichier externe): Portrait de Tally.
Merci de m’avoir lu et de vous pencher éventuellement sur la question.
Cordialement.
-----

[invite948b37db]

BONJOUR

Dans le formulaire de réponse (input ou textarea), l’apostrophe du clavier est «dactylographique» ['](\u0027).

Je n'avais jamais remarqué cette substitution de caractère. Elle est propre à cette application ?

Serait-il possible de construire un script qui remplace automatiquement lors de la frappe ['](\u0027) par [’](\u2019)?

C'est tout à fait possible dans un formulaire comme celui de l'exemple d'y insérer un Javascript qui relit les inputs et remplace ce caractère mais tu dis qu'il y a des milliers de formulaires donc le travail risque d'être fastidieux.
Il faudrait avoir accès au code source. Est-ce possible ?

[invite948b37db]

Il faudrait avoir accès au code source. Est-ce possible ?

Je n'avais pas compris le fonctionnement du formulaire. Il fait appel au Javascript "scriptHotCloze.js". Il en est probablement ainsi de tous les formulaires. En modifiant ce script, la correction devrait s'appliquer à tous les formulaires. Le script contient une fonction "CheckAnswers". Il suffirait d'implémenter cette fonction pour faire les corrections nécessaires et c'est tout... Ou presque car je n'ai pas compris son fonctionnement

[Backeljau]

Je n'avais jamais remarqué cette substitution de caractère. Elle est propre à cette application ?

Bonjour à vous aussi, et merci pour votre réponse.
Je m’étais mal exprimé: TOUS les champs textes des formulaires sur le Web (comme le bloc-notes, mais contrairement au traitement de texte bien configuré) encodent l’apostrophe droite avec le clavier. (À moins justement d’être soumis au script que je recherche, justement)
C’est cette apostrophe que je voudrais voir automatiquement remplacée par une apostrophe courbe (typographique).
La ligne :

Guess = Guess.replace(/\'/g, "\u2019");

était censée opérer cette commutation. Elle inopérante.

[A voir en vidéo sur Futura]

[invite948b37db]

Guess = Guess.replace(/\'/g, "\u2019");

était censée opérer cette commutation. Elle inopérante.

Pourquoi ne pas faire simplement :

Guess = Guess.replace("'", "\u2019");

[Backeljau]

Pourquoi ne pas faire simplement :

Guess = Guess.replace("'", "\u2019");

Cette solution m’a été proposée par Spout sur WebRankInfo. J’ai ajouté la ligne dans le code js mais elle était inopérante: elle n’entrave pas le fonctionnement du code mais n’effectue pas non plus la commutation automatique.
J’ai alors bidouillé des variantes, comme celle citée ici plus haut, mais sans succès.
Merci de vous être intéressé au sujet.

[invite948b37db]

J’ai ajouté la ligne dans le code js mais elle était inopérante: elle n’entrave pas le fonctionnement du code mais n’effectue pas non plus la commutation automatique.

Je pense que la commande n'est pas placée au bon endroit. Dans le formulaire "Portait de Tally", il faut insérer ceci à partir de la ligne 956 :

      txt_1=document.getElementById(GapLabel).value;
      txt_2=txt_1.replace("'", "\u2019");
      document.getElementById(GapLabel).value=txt_2;

[Backeljau]

Je pense que la commande n'est pas placée au bon endroit. Dans le formulaire "Portait de Tally", il faut insérer ceci à partir de la ligne 956 :

      txt_1=document.getElementById(GapLabel).value;
      txt_2=txt_1.replace("'", "\u2019");
      document.getElementById(GapLabel).value=txt_2;

Bonjour, et merci, Cherbe, pour la recherche approfondie dans le code que vous avez menée. J’ai inséré les trois lignes sous celles-ci :

function CheckAnswer(GapNum, MarkAnswer){
	var Guess = GetGapValue(GapNum);

et j’ai mis en ligne la page concernée.
Hélas, cet ajout reste inopérant, sans entraver l’autocorrection mais sans modifier le caractère lors de la frappe.
(Pour cette page, la correction valide un copié-collé de la réponse avec apostrophe courbe ou l'insertion de ce caractère avec le bouton [’] car j’ai ajouté l’occurrence. Mais cette occurrence ne s’affiche que si elle a été insérée par le visiteur; s’il a tapé sa réponse au clavier, c’est celle-ci qui s’affiche)
Un casse-tête !

[invite948b37db]

cette occurrence ne s’affiche que si elle a été insérée par le visiteur; s’il a tapé sa réponse au clavier, c’est celle-ci qui s’affiche
Un casse-tête !

Le casse-tête, c'est l’opium du forum !
Je me demande si ce caractère n'est pas "re remplacé" après ? Pour s'en assurer, il faudrait à titre provisoire remplacer par un caractère courant comme la virgule.
il faudrait aussi faire le test avec un autre navigateur.

[Backeljau]

Le casse-tête, c'est l’opium du forum !
Je me demande si ce caractère n'est pas "re remplacé" après ? Pour s'en assurer, il faudrait à titre provisoire remplacer par un caractère courant comme la virgule.
il faudrait aussi faire le test avec un autre navigateur.

Voici le code selon votre suggestion, Cherbe:

function CompileGuesses(){
	var F = document.getElementById('store');
	if (F != null){
		var Temp = '<?xml version="1.0"?><hpnetresult><fields>';
		var GapLabel = '';
		for (var i=0; i<State.length; i++){
			GapLabel = 'Gap ' + (i+1).toString();
		txt_1=document.getElementById(GapLabel).value; //ajout FS
		txt_2=txt_1.replace("'", ","); //ajout FS
		document.getElementById(GapLabel).value=txt_2; //Ajout FS
	  	Temp += '<field><fieldname>' + GapLabel + '</fieldname>';
		Temp += '<fieldtype>student-responses</fieldtype><fieldlabel>' + GapLabel + '</fieldlabel>';
		Temp += '<fieldlabelid>JClozeStudentResponses</fieldlabelid><fielddata>';
			for (var j=0; j<State[i].Guesses.length; j++){
				if (j>0){Temp += '| ';}
				Temp += State[i].Guesses[j] + ' ';	
			}	
  		Temp += '</fielddata></field>';
		}
		Temp += '</fields></hpnetresult>';
		Detail = Temp;
	}
}

J’ai enregistré ainsi la page et j’ai essayé tant avec Firefox/sous Vista (mon navigateur habituel) que sur InternetExplorer9/Vista: le résultat est le même, la virgule n’apparait pas quand je frappe l’apostrophe clavier.
Peut-être, si vous le voulez, pouvez-vous enregistre le code de la page et essayer vous-même en fichier local?
Je vous suis reconnaissant d’avoir examiné ma question avec attention.

[invite948b37db]

Bon, cette fois ça marche, non mais on va pas se laisser emm... !
Il faut rechercher la fonction GetGapValue() vers la ligne 1050 et la modifier ainsi :

function GetGapValue(GNum){
	var toto='Gap' + GNum;
	txt_1=document.getElementById(toto).value;
        txt_2=txt_1.replace("'", "’");
	document.getElementById(toto).value=txt_2;
       var RetVal = '';

[Backeljau]

Merci pour ce nouvel essai, Cherbe. Hélas, ce remplacement du code a pour effet la paralysie des commandes. Tant sous IE que sous Firefox, les boutons «Correction» et «Aide» sont inactifs et le bouton «’» n’est plus affiché.
Je n’ai donc pas rechargé la page dans sa nouvelle version sur le Web.

[invite948b37db]

Là je ne comprends pas car chez moi ça fonctionne sans la moindre erreur (Windows 7 et Firefox).
Depuis Firefox, cliquez sur le bouton symbolisé par 3 traits horizontaux en haut à droite puis sur développement puis sur débogueur.
Rechargez la page et faites de nouveaux le test.
le débogueur, en bas de page, doit indiquer la 1ère ligne à problème.

[Backeljau]

Là je ne comprends pas car chez moi ça fonctionne sans la moindre erreur (Windows 7 et Firefox).

J’ai fait ceci dans le code :

//function GetGapValue(GNum){
//	var RetVal = '';
//	if ((GNum<0)||(GNum>=I.length)){return RetVal;}
//	if (document.getElementById('Gap' + GNum) != null){
//		RetVal = document.getElementById('Gap' + GNum).value;
//		RetVal = TrimString(RetVal);
//	}
//	else{
//		RetVal = State[GNum].Guesses[State[GNum].Guesses.length-1];
//	}
//	return RetVal;
//}
function GetGapValue(GNum){
	var toto='Gap' + GNum;
	txt_1=document.getElementById(toto).value;
        txt_2=txt_1.replace("'", "’");
	document.getElementById(toto).value=txt_2;
       var RetVal = '';
}

et la page s’affiche sans le bouton [’] tandis que «Correction» et «Aide» restent inactifs.
J’ai peut-être eu tort d’évoquer mes pages générées par HotPotatoes.
En fait, comme je l’écrivais plus haut, la plupart des formulaires Web affichent l’apostrophe droite lors de sa frappe au clavier au lieu d’en faire une apostrophe courbe.
Ainsi ce champ d’encodage sur ma page Ce soir-là. Là non plus, je ne vois pas comment obtenir l’effet d’un traitement de texte bien configuré, c’est-à-dire avec l’option langue française et correction automatique en cours de frappe.

[invite948b37db]

J’ai fait ceci dans le code :

//function GetGapValue(GNum){
//	var RetVal = '';
//	if ((GNum<0)||(GNum>=I.length)){return RetVal;}
//	if (document.getElementById('Gap' + GNum) != null){
//		RetVal = document.getElementById('Gap' + GNum).value;
//		RetVal = TrimString(RetVal);
//	}
//	else{
//		RetVal = State[GNum].Guesses[State[GNum].Guesses.length-1];
//	}
//	return RetVal;
//}
function GetGapValue(GNum){
	var toto='Gap' + GNum;
	txt_1=document.getElementById(toto).value;
        txt_2=txt_1.replace("'", "’");
	document.getElementById(toto).value=txt_2;
       var RetVal = '';
}

Non, il fallait insérer mon code à la ligne suivant l'accolade ouvrante ({) sans rien supprimer ni mettre de "//"

[Backeljau]

Je suis désolé mais cette solution ne fonctionne pas non plus.

[invite948b37db]

Je suis désolé mais cette solution ne fonctionne pas non plus.

Et que dit le débogueur ?

[Backeljau]

Et que dit le débogueur ?

Je ne sais pas comment utiliser le débogueur. Quand je me rends sur cette fenêtre sur vos directives, je ne vois pas de message d’erreur au bas de l’écran.
Je charge la page remaniée comme vous l’indiquez sous ce lien.
Voyez par vous-même que les boutons sont inactifs.
(Dans quelques jours, ce document de travail sera effacé)

[invite948b37db]

Je ne sais pas comment utiliser le débogueur. Quand je me rends sur cette fenêtre sur vos directives, je ne vois pas de message d’erreur au bas de l’écran.

Oups, j'ai oublié de dire qu'il fallait cocher " console".
Voici ce qu'elle affiche :
SyntaxError: missing } after function body Portraits_lacunaires01bis.htm: 1169
Il manque une accolade fermante à la ligne 1169

[Backeljau]

Oups, j'ai oublié de dire qu'il fallait cocher " console".
Voici ce qu'elle affiche :
SyntaxError: missing } after function body Portraits_lacunaires01bis.htm: 1169
Il manque une accolade fermante à la ligne 1169

Oui, je vois maintenant. Mais cette accolade fermante affichée comme manquante est due à la partie de code remplacée, je pense, car la problème n’apparait pas dans le script original figurant sur cette page: Tally. J’ai beau ajouter cette accolade, le script reste inactif.

[invite948b37db]

fermante affichée comme manquante est due à la partie de code remplacée, je pense, car la problème n’apparait pas dans le script original

Et c'est là que l'on ne se comprend pas : il ne faut rien supprimer, juste insérer le code suggéré !

[Backeljau]

J’avais peut-être mal exposé ma demande. Mais vous m’avez mis sur la piste. Et j’ai trouvé !
La solution était à cette adresse.

Je vous la confie ici.
Une ligne de fonction :

<script type="text/javascript">
function apostrophe(e){e.value = e.value.replace(/'/g,'’');}
</script>

Un attribut dans la balise <input> ou <textarea>:

onkeyup="apostrophe(this)"

J’ai complété mes deux fichiers externes concernés et plusieurs chapitres de mon site :
Portraits et Descriptions, notamment.

Bon week-end.

[Backeljau]

Dans la foulée, j’ai inclus dans le code de remplacement automatique les lettres ligaturées.
Heureux de cette avancée, j’ai écrit quelques lignes à ma façon :

Des apostrophes appelées typographiques,
Dans mes fertiles champs de texte à compléter,
Fleurissent désormais tout au long du sentier
Pédagogique : Ah ! j’aime ces traits bucoliques !

http://users.skynet.be/courstoujours/Stances/P105.htm

[Backeljau]

Bonjour à toutes et à tous,
Depuis juillet 2021, la page se consulte désormais à l'adresse suivante :
https://courstoujours.be/Stances/P126.htm