fgcolor du contenu d'un span

pascal scalpa a écrit :

bonjour

Bonjour,

Dans une div , il y a un span dont j'aimerai connaître et modifier la
couleur du contenu sans passer par une class, est-ce possible ?

Dommage, parce que j'aurais plutôt conseillé ça, par expérience.
Bon, voyons autrement...

<div id="exo">
<span class="selected" onclick="verif(this);">Collez</span>

Ok, rien de mystérieux jusque-là.

function verif(quoi) {
if (quoi.innerHTML.fgColor = 'red')// si le mot est rouge, c'est qu'i l
a été dèjà cliqué #FF0000 = red
{
quoi.innerHTML.fgColor = 'blue'; // je le remets en bleu #0000FF =
blue
quoi = quoi.innerHTML; // Je réinjecte le contenu dans le tag
<span>

Connais pas le "fgColor", ça devait faire partie du HTML d'avant la
guerre. Bof, me souviens plus.

Par contre, je connais "quoi.style.color = 'red';", qui devrait
fonctionner bien plus mieux. En plus, ça fait qu'une ligne !

Cordialement,
Pascal (bis)

Par contre, je connais "quoi.style.color = 'red';", qui devrait
fonctionner bien plus mieux. En plus, ça fait qu'une ligne !

J'avais essayé ça aussi, mais sans succès.... arrgh!

scalpa a écrit :

J'avais essayé ça aussi, mais sans succès.... arrgh!

Oui mais attention, le style récupéré par JS avec cette propriété ne
peut être que celui passé en ligne dans l'élément, ou celui impos é par
une définition de la propriété.

Le problème, c'est que je ne sais pas comment le texte s'est retrouvé en
rouge avant de revenir en bleu.

En clair, on se retrouve avec deux solutions.

Dans la première, le style est en ligne :
<span style="color: red;" onclick="verif(this);">Collez</span>

Dans la deuxième, le style a été imposé par le script :
<span id="truc" onclick="verif(this);">Collez</span>
<script>
document.getElementById("truc").style.color = "red";
</script>

Dans les deux cas, la fonction est la même :
<script>
function verif(elem) {
if (elem.style.color == "red") {
elem.style.color = "blue";
}
}
</script>

Mais je préfère de loin cette autre solution (si ça colle avec le p rojet
en question dont je ne connais pas les détails) :

<style type="text/css">
.selected {color: red;}
.notSelected {color: blue;}
</style>
<script type="text/javascript">
function verif(elem) {
if (elem.className == "selected") {
elem.className = "notSelected";
}
}
</script>
<span class="selected" onclick="verif(this)">Collez</span>

Cordialement,
Pascal

Bonjour

Le but du projet est de construire une page php sur mon site afin
d'automatiser la construction d'exercices comme celui-ci :
http://www.scalpa.info/fr_gram_vb1_clicmot.php mais qui permettrait en
plus de tenir compte des homonymes : genre si je demande de trouver
des verbes, il faudrait pouvoir différencier dans une phrase comme
celle-ci : "Les poules du couvent couvent." le premier couvent comme
étant une mauvaise réponse.
Je pensais donc identifier les bonnes réponses avec une classe
selected et tester les réponses choisies par l'élève en testant le
"color" du mot.
Je vais regarder à tête reposée.. ton code

pascal

Le problème, c'est que je ne sais pas comment le texte s'est retrouvé en rouge avant de revenir en bleu.

voilà le code actuel du générateur :
var _debug=1;
var titrepage ='ClicMots : générateur d'exercices en ligne';
var titrexo = "Titre";
var titrelivre = "Titre du livre";
var auteur = "Auteur inconnu";
var ListeMots = new Array();
var NbMotsATrouver = ListeMots.length;


function initialiser() {
// Consigne 1
document.getElementById('FeedBack').innerHTML = 'Collez ici votre
extrait de texte, puis cliquez sur le bouton "Étape suivante".';
}

// Vide le textarea
function clearIt(oTxt){
if (oTxt.value==oTxt.defaultValue){
oTxt.value = "";
}
}

// Affiche le texte par défaut dans le textarea
function resetTxt(oTxt){
if (oTxt.value==""){
oTxt.value = oTxt.defaultValue;
}
}

//rendre les mots du texte cliquable et formatable en rouge
function txt_init() {

// input_txt contient le texte à analyser
var input_txt =
HTMLEncode(document.getElementById('inputtext').value);
job = HTMLEncode(document.getElementById('inputjob').value);

// txt = txt.replace(/([w]+)(?=[s?'".,;!?«»-()])/gi,'<span cl ass=
'Noselected' onclick="verif(this)">$1</span>');
input_txt = input_txt.replace(/([wéçâêîôûàèùëï] +)(?=[s?'’".,;!?«»-
()])/gi,'<span class="Noselected" style="color:blue;"
onclick="pick(this);">$1</span>');
//nouveau contenu de la div
document.getElementById('etap1').innerHTML = (input_txt);
// Je cache le textarea et le bouton
document.getElementById('btn1').style.display = 'none';
// Consigne 2
document.getElementById('FeedBack').innerHTML = 'Cliquez sur les mots
cibles.';
}


function pick(quoi) {

// Condition permettant de revenir sur sa décision
// si le mot est rouge, c'est qu'il a été dèjà cliqué
if (quoi.className == "selected"){

quoi.className = "Noselected"; // je le remets en bleu
quoi = quoi.innerHTML; // Je réinjecte le contenu dans le tag
<span>
// puisqu'il était rouge, c'est que le joueur l'avait cliqué, donc
on le vire de la liste de ses mots
for(var i=0, n=ListeMots.length; n>i; i++){
if ( ListeMots[i] == quoi){
ListeMots[i]=ListeMots[ListeMots.length-1];
ListeMots.pop();
// on sort de la boucle si le mot cliqué a été trouvé
break;
}
}

// Un mot de moins dans la liste
NbMotsATrouver--;
document.getElementById('FeedBack').innerHTML='Tu as sélectionné '
+ NbMotsATrouver + ' mots.';
}
// si le mot est bleu
else{
// Un mot de plus dans la liste
NbMotsATrouver++;
document.getElementById('FeedBack').innerHTML='Tu as sélectionné ' +
NbMotsATrouver + ' mots.';
// Le mot est rouge maintenant
quoi.className = "selected";
// On réinjecte le contenu dans le tag <span>
quoi = quoi.innerHTML;
// on ajoute le mot dans la liste du joueur
ListeMots.push(quoi);
}
// afficher bouton
if (NbMotsATrouver>=1){
document.getElementById('btn').innerHTML = '<button id="btn2"
onclick="creerExo();">Créer l'exo</button>';
}

// debug purpose
if (_debug==1){
var DivDebug = document.getElementById('debug');
var mots_cliques = "['"+ListeMots.join("','")+"']";
DivDebug.innerHTML = NbMotsATrouver + ' mot(s) sélectionné(s) :
'+mots_cliques;

}
}//#fin de la fonction selectmots

function creerExo(){
var MonExo = document.getElementById("etap1").innerHTML;
var mots_cliques = "['"+ListeMots.join("','")+"']";
MonExo = MonExo.replace(/pick(this);/g, "verif(this);");
//MonExo = MonExo.replace(/<SPAN class=selected /gi, "<span class=
"selected" ");
//MonExo = MonExo.replace(/<SPAN class=Noselected /gi, "<span class=
"Noselected" ");
//MonExo = MonExo.replace(/</SPAN>/g, "</span>");
// mots
var listesMots = '<script type="text/javascript">n//<![CDATA[n<!--n
var ListeSansDoublon ='+mots_cliques+';n var _debug = 1; n var
MotRechercher ="'+job+'";n//-->n//]]>n</script>';
//MonExo = HTMLDecode(MonExo);
var entete = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"n "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">n<html lang="fr" xml:lang="fr" xmlns="http://
www.w3.org/1999/xhtml">nr<head>n<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />n<meta name="author"
content="Pascal Chalopin" />n'+listesMots+'n<script type="text/
javascript" src="clicmot4.js"></script>n<title>'+titrepage+'</title>
n<link rel="stylesheet" type="text/css" media="all"
href="clicmot4.css" />n</head>n<body>n<div id="entete"></div>n<a
href="#haut" name="haut"></a>';
entete+='<h1>'+titrexo+'</h1>n<div id="consigne"></div>n';

var corps ='<div id="debug"></div>n<div id="identity"></div>n<div
id="FeedBack"></div>n<div id="exo">n'+MonExo+'</div>';
corps+='<p><i>'+auteur+'</i> <b>'+titrelivre+'</b></p>n<div id="btn"
class="cntr"></div>n<div id="fin"></div>n<div id="soluce"></div>';
corps+= '<a href="#haut">Retourner en haut de page</a>n<div id="pied ">
n<p id="copyright">©&nbsp;2009&nbsp;SCALPA, tous droits réservés -
Utilisation encouragée. </p></div>n</body>n</html>';

var resultat = entete + corps;
// Je cache le bouton
document.getElementById('btn2').style.display = 'none';
document.getElementById('etap1').style.display = 'none';
//nouveau contenu de la div
document.getElementById('etap2').innerHTML = '<div
class="cntr"><textarea id="outputtext" name="outputtext" cols="80"
rows="20" ></textarea></div>';
document.getElementById('outputtext').value= resultat;


}


######################" html#######################"
<a href="logiciels_news.php" title="retour">Retour à la page
logiciels</a><br />
<h2 class="cntr"><?php echo $titre_page ?></h2>
<div id="debug"></div>
<div id="FeedBack"></div>
<div class="cntr">
<div id="etap1">
<p><input value="Type de mot à identifier au format : mot(s)"
id="inputjob" type="text" onfocus="this.value=''"" /></p><br />
<textarea id="inputtext" name="inputtext" cols="60" rows="15"
onfocus="clearIt(this);" onblur="resetTxt(this);">
Collez ici votre texte encodé en UTF-8, puis cliquez sur le bouton
étape suivante. ATTENTION : tous les caractères ésothériques seront
supprimés.
</textarea><br />
</div><!--#idEtap1-->
</div>
<div id="etap2"></div><!--#idEtap2-->
<div id="btn" class="cntr"><input alt="Première étape" id="btn1 "
name="btn1" type="button" value="Étape suivante"
onclick="txt_init();" /></div>

Bonjour,

Le 16/04/2010 20:06, scalpa a écrit :

http://www.scalpa.info/fr_gram_vb1_clicmot.php

J'ai une remarque et une question, après avoir fait l'exercice n°1 sur
le Petit Poucet.

La remarque, c'est que compter le nombre de clics ne peut servir à rien
d'autre qu'à stresser inutilement celui qui fait l'exercice : cela
induit implicitement le fait qu'il faille faire le moins de clics
possible, alors que certains peuvent être involontaires (souris qui
bouge d'un millimètre au moment de cliquer, par exemple, ce qui
sélectionne le mot d'à côté, avec deux clics de plus pour défaire la
sélection et sélectionner le bon). Au contraire, c'est le nombre de mots
sélectionnés qu'il faudrait comptabiliser, afin de savoir plus
facilement quand on a trouvé tous les mots à chercher.

La question, c'est pourquoi « gagner » et « prenant » ne sont pas
considérés comme des verbes ? Tu veux dire les verbes qui ne sont ni à
l'infinitif ni au participe présent ? Si oui, je pense qu'il faudrait le
préciser explicitement.

Cordialement,
--
Olivier Miakinen

Ah, j'oubliais...

Le 16/04/2010 20:26, Olivier Miakinen a écrit :

http://www.scalpa.info/fr_gram_vb1_clicmot.php

La question, c'est pourquoi « gagner » et « prenant » ne sont pas
considérés comme des verbes ? Tu veux dire les verbes qui ne sont ni à
l'infinitif ni au participe présent ? Si oui, je pense qu'il faudrait le
préciser explicitement.

C'est sans doute volontairement que tu as remplacé « qu'il ait eu » par
« qu'il eût », pour éviter une autre difficulté sur la définition des
verbes (y a-t-il le seul verbe avoir au subjonctif passé, « ait eu », ou
bien deux verbes ?) mais tu as oublié l'accent circonflexe... ;-)

Bonsoir
Merci de vos remarques et commentaires.

>>http://www.scalpa.info/fr_gram_vb1_clicmot.php

> La question, c'est pourquoi gagner et prenant ne sont pas
> consid r s comme des verbes ? Tu veux dire les verbes qui ne sont ni
> l'infinitif ni au participe pr sent ? Si oui, je pense qu'il faudrait l e
> pr ciser explicitement.

C'est vrai que je devrai expliciter la consigne plus clairement pour
les internautes qui ne sont pas dans ma classe.... Mes élèves, eux,
savent ce que j'attends (verbes conjugués) et ces exo leur sont
principalement destinés. Mais une petite variable de plus pour la
consigne sera un plus.

C'est sans doute volontairement que tu as remplac qu'il ait eu par
qu'il e t , pour viter une autre difficult sur la d finition des
verbes (y a-t-il le seul verbe avoir au subjonctif pass , ait eu , ou
bien deux verbes ?) mais tu as oubli l'accent circonflexe... ;-)

Dès le début (et tout au long) d'année, on travaille sur la capacit é à
distinguer les temps simples des temps composés, mais dans les
premiers exo j'essaie effectivement de limiter le travail aux temps
simples alors j'adapte (mais ici, mal en fait car la concordance n'est
pas respectée).

Compter les clics bien que stressant oblige à ne pas cliquer n'importe
où........ au petit bonheur.........

pascal

Le 4/15/10 4:43 PM, pascal scalpa a écrit :

bonjour
Dans une div , il y a un span dont j'aimerai connaître et modifier la
couleur du contenu sans passer par une class, est-ce possible ?

Tout dépend de la manière dont est attribuée la couleur au span
- par une feuille de style
- par un attribut 'style' ou un attribut 'class'
- dans la balise
- dans le conteneur du span
- par un "stylage" par JS

et encore !
faut-il que le navigateur ne s'en fasse pas une traduction

<span onclick="this.style.color='red';alert(this.style.color)">
test de couleur </span>

Opera --> "#ff0000"
mes autres navigateurs --> 'red'


Le plus simple et le plus compatible est donc de passer par une class
appliquée au span
(voir le test proposé + bas à essayer dans IE, Fx, Safari, Opera, ...
et qui montre aussi que ce n'est pas la couleur 'blue' ou 'red'
qu'il faut chercher mais aussi celle hexa et probablement celle rvb)

merci

<div id="exo">
<span class="selected" onclick="verif(this);">Collez</span>

le js qui va avec et qui ne marche pas.....:

function verif(quoi) {
if (quoi.innerHTML.fgColor = 'red')// si le mot est rouge, c'est qu'il

if(quoi.innerHTML.fgColor == 'red')

double égal !!!

a été dèjà cliqué #FF0000 = red
{
quoi.innerHTML.fgColor = 'blue'; // je le remets en bleu #0000FF > blue
quoi = quoi.innerHTML; // Je réinjecte le contenu dans le tag
<span>

non,
'quoi' est :
'<span onclick="verif(this)">blabla</span>'
'quoi.innerHTML' serait alors :
'blabla'
la fonction remplacerait :
<span onclick="verif(this)">blabla</span>
par :
blabla
ce que je ne pense pas que c'est ce que tu veux ...

Le commentaire explicatif est donc faux !
ce serait plutôt qque chose comme :
// la variable 'quoi' prend maintenant la valeur du contenu du tag


il me semble que "fgColor" c'est du vieux JS
et qu'il est un peu "propriétaire" ?
(fgColor n'est sans doute pas compris par tout navigateur)

il est plus que probable que 'red' ou 'blue'
ne soient pas la couleur du "foreground"
telle qu'enregistrée par le navigateur
(qui doit se l'avoir traduite en hexa ou rgb suivant le navigateur)

en outre, ce doit certainement être appliqué à la balise et non à son
contenu (ce serait : quoi.fgColor et non pas quoi.innerHTMl.fgColor)

et, de ttes façons, au mieux, ça ne s'applique qu'au 'document'
============================================================== à preuve, tester :

<html>
<body text="blue" bgcolor="lightyellow">
<h1>test de l'avant-plan (foreground)</h1>
<button
onclick="alert('fgColor = '+document.fgColor+
'nbgColor = '+document.bgColor)">les couleurs</button>
</html>

Voir :
<https://developer.mozilla.org/en/DOM/document.fgColor>




Pour bien se convaincre de l'impossibilité dans le span, essayer voir :

function verif(quoi) {
if (quoi.fgColor &&
quoi.fgColor == 'red') // si le mot est rouge,
// c'est qu'il a été dèjà cliqué
// #FF0000 = red
{
quoi.fgColor = 'blue'; // remis bleu #0000FF = blue
quoi = quoi.innerHTML; // 'quoi' = le contenu de "quoi'
}
/*
les trucs-bidules pour engranger ce mot 'quoi'
et faire les divers comptages
*/
}

Normalement, on n'a pas à s'occuper de la couleur bleue
(qui est celle par défaut)

function verif(quoi) {
if (quoi.fgColor)
{
var c = quoi.fgColor;
if( c == 'red' ||
c == '#FF0000' ||
c.replace(/ /g,'') == 'rgb(255,0,0)'
) // si le mot est rouge c'est qu'il a été dèjà cliqué
{
quoi.fgColor = ''; // remis bleu #0000FF = blue
quoi = quoi.innerHTML; // 'quoi' = le contenu de "quoi'
}
/*
les trucs-bidules pour engranger ce mot 'quoi'
et faire les divers comptages
*/
}
else alert('"fgColor" n''est pas reconnundans ce contexte');
}


--
sm

Le 4/16/10 8:06 PM, scalpa a écrit :

Bonjour

Le but du projet est de construire une page php sur mon site afin
d'automatiser la construction d'exercices comme celui-ci :
http://www.scalpa.info/fr_gram_vb1_clicmot.php mais qui permettrait en
plus de tenir compte des homonymes : genre si je demande de trouver
des verbes, il faudrait pouvoir différencier dans une phrase comme
celle-ci : "Les poules du couvent couvent." le premier couvent comme
étant une mauvaise réponse.
Je pensais donc identifier les bonnes réponses avec une classe
selected et tester les réponses choisies par l'élève en testant le
"color" du mot.

ce n'est pas pour rien qu'on passe par une classe pour définir et
reconnaitre cette couleur ;-)

monSpan.fgColor
ça ne va pas pouvoir fonctionner

le 'color du mot' ou le 'foreground de l'élément'
chaque navigateur a sa méthode pour le définir
il faudrait alors tester chaque méthode
('blue', '#0000FF", 'rgb(0,0,255')

et de toutes façons ça ne fonctionne que pour
document.fgColor

monSpan.style.color
ça ne fonctionnera que si le JS a indiqué cette couleur
(même remarque que ci-haut pour traductions par navigateur)
par une fonction ou l'attribut 'style' dans la balise

En supposant que la classe ne change pas la couleur par défaut (blue),
à la limite, on peut essayer :

function verif(quoi) {
NbClics++; // incrémentation nbre de clics
var ok = quoi.style.color==""; // le mot est-il en bleu ?
if(ok) compterLeMot(quoi.innerHTML); // si oui, le compter
else deCompterLeMot(quoi.inneHTML); // si non, le décompter
quoi.style.color = ok? 'red' : ''; // fixer/changer sa couleur
quoi.style.fontWeight = ok? 'bold':''; // fixer/changer la graisse
/* mettre à jour le cpteur de temps, le cpteur d'erreurs, la note */
}

--
sm