surligner à la souris

Le
Pascal
Bonjour

Peut-on surligner du texte, à l'aide de la souris, dans une page html?
Est-il possible de choisir la couleur de surlignement au préalable en
cliquant dans une "palette de couleurs"?
Le but du jeu étant d'analyser la construction grammaticale d'une phrase.
L'élève devra, dans chaque phrase d'un texte, retrouver le sujet, le verbe,
certains compléments en surlignant chaque partie des phrases du texte avec
une couleur déterminée.
Exemple: Le chien ronge son os.
1 Surligne en jaune le sujet : Le chien
2 surligne en rouge le verbe : ronge
3 surligne en orange le complément d'objet direct : son os

Bien sûr, à la fin je devrais pouvoir comparer la réponse de l'élève à la
solution.

merci
pascal
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 3
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #23006241
Le 09/01/11 12:04, Pascal a écrit :
Bonjour

Peut-on surligner du texte, à l'aide de la souris, dans une page html?
Est-il possible de choisir la couleur de surlignement au préalable en
cliquant dans une "palette de couleurs"?



avec les mots qu'il faut entre les balises span
il doit bien il y avoir moyen de leur donner une bordure basse de la
couleur voulue ?

Le but du jeu étant d'analyser la construction grammaticale d'une
phrase. L'élève devra, dans chaque phrase d'un texte, retrouver le
sujet, le verbe, certains compléments en surlignant chaque partie des
phrases du texte avec une couleur déterminée.
Exemple: Le chien ronge son os.
1 Surligne en jaune le sujet : Le chien
2 surligne en rouge le verbe : ronge
3 surligne en orange le complément d'objet direct : son os

Bien sûr, à la fin je devrais pouvoir comparer la réponse de l'élève à
la solution.



<select id="couleurs">
<option value="yellow">sujet
<option value="red">verbe
<option value="orange">complément
</select>
<p>
<span ondblclick="surligne(this)">chien</span>

function surligne(quoi) {
var coul = document.forms[0].coul.value;
quoi.style.borderBottom = '1px solid '+coul;
}

merci
pascal



il doit aussi il y avoir moyen de se passer de span
s'il n'y a qu'un seul mot à souligner à la fois


--
Stéphane Moriaux avec/with iMac-intel
Dr J R Stockton
Le #23012251
En fr.comp.lang.javascript <4d2b0a88$0$32469$
.fr>, Lun, 10 Jan 2011 14:32:56, SAM
.invalid> a ecrit:

<select id="couleurs">
<option value="yellow">sujet
<option value="red">verbe
<option value="orange">complément


<OPTION VALUE="">Supprimer le marquage <!-- +++ -->
</select>
<p>
<span ondblclick="surligne(this)">chien</span>

function surligne(quoi) {
var coul = document.forms[0].coul.value;


quoi.style.borderBottom = coul && '1px solid '+coul; // +++
}



?? Pas complètement testé.

--
(c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk Turnpike v6.05 IE 8.
Web Command-prompt MiniTrue is useful for viewing/searching/altering files. Free,
DOS/Win/UNIX now 2.0.6; see
SAM
Le #23014931
Le 10/01/11 14:32, SAM a écrit :

il doit aussi il y avoir moyen de se passer de span
s'il n'y a qu'un seul mot à souligner à la fois



En fait ... pas vraiment ...
au double-clic ou au mouse-up
on ré-injecte la sélection dans un span

pour pouvoir lui attribuer la bonne class

Y a des trucs JS, pour IE ou non, qui se chargent de cette re-injection.

Ça devient + ardu quand on veut ensuite :
- annuler une sélection (la retrouver pour en enlever les span)
- modifier une sélection (retrouver ses span s'ils existent)

Pour le corrigé yaka avoir des class (sujet, verbe, cplmt)
à avoir mis d'où qui faut

--
Stéphane Moriaux avec/with iMac-intel
Pascal
Le #23055091
Bonjour

C'est toujours en chantier.... J'y bosse sporadiquement.... malheureusement.
J'ai un souci avec le parcours des span contenus dans un div...qui m'a coupé
dans mon élan...
http://cjoint.com/?0bAtbHZiGjq
Pascal
Le #23056181
Le 26/01/2011 19:02, Pascal a écrit :
http://cjoint.com/?0bAtbHZiGjq



Et comme ça, ce n'est pas plus simple ?
http://cjoint.com/?0bAwF7QR8hK


--
Cordialement,
Pascal
Pascal
Le #23058371
Bonjour
C'est carrément excellent... concis, efficace ! Merci beaucoup...

var target = ev ? ev.target : event.srcElement;
Ca veut dire quoi le ? et le : C'est l'écriture condensée d'un test ?

Cordialement,
Pascal
Olivier Miakinen
Le #23058421
Le 27/01/2011 18:55, Pascal a écrit :

var target = ev ? ev.target : event.srcElement;
Ca veut dire quoi le ? et le : C'est l'écriture condensée d'un test ?



Il s'agit de l'opérateur ternaire :
http://www.google.fr/search?q=op%E9rateur+ternaire

En gros,
a = test ? val1 : val2;
est équivalent à :
if (test) a = val1
else a = val2;
SAM
Le #23060311
Le 27/01/11 18:55, Pascal a écrit :
Bonjour
C'est carrément excellent... concis, efficace ! Merci beaucoup...




Impec !

mais ... à qui, à quoi réponds-tu ?
sur quel(s) NG(s) es-tu en même temps ?


var target = ev ? ev.target : event.srcElement;
Ca veut dire quoi le ? et le : C'est l'écriture condensée d'un test ?



Heu ... c'est une écriture raccourcie pour :

var target;
if(ev)
{
target = ev.target;
}
else
{
target = event.srcElement;
}

Mais Olivier l'avait déjà dit ... ;-)


Pour "attraper" un élément 'cible' qui aurait l'événement déclencheur,
on peut aussi faire :

var ev = ev || window.event;
var cible = ev.target || ev.srcElement;

Exemple :
(avec en prime le truc ? : )

<script type="text/javascript">
function targ(e) {
e = e || window.event;
var cible = e.target || e.srcElement;
alert( cible.tagName + 'n' +
(cible.className? cible.className : 'pas de class') );
}
window.onload = function() { document.body.onclick = targ; }
</script>

--
Stéphane Moriaux avec/with iMac-intel
SAM
Le #23060571
Le 26/01/11 22:36, Pascal a écrit :
Le 26/01/2011 19:02, Pascal a écrit :
http://cjoint.com/?0bAtbHZiGjq



Et comme ça, ce n'est pas plus simple ?
http://cjoint.com/?0bAwF7QR8hK



Heu ...
pourquoi "Le chien" indiqué comme sujet donne t-il 2 points ?
pire :
pourquoi "Le" indiqué comme sujet donne t-il 1 points ?


<script type="text/javascript">
document.getElementById('exo').onclick = souligne;
document.getElementById('correction').onclick = corrige;
function souligne(ev) {
ev = ev? ev.target : window.event.srcElement;
if (ev.tagName != "SPAN") return;
ev.className = document.getElementById('type').value;
document.getElementById('score').value = "";
}
function corrige() {
var score = 0,
mots = document.getElementById('exo').getElementsByTagName('SPAN'),
n = mots.length;
while(n--)
with(mots[n]) if(className && id.indexOf(className)>=0) score++;
document.getElementById('score').value = score;
}
</script>

--
Stéphane Moriaux avec/with iMac-intel
Pascal
Le #23060561
Le 28/01/2011 09:46, SAM a écrit :
mais ... à qui, à quoi réponds-tu ?
sur quel(s) NG(s) es-tu en même temps ?



Hé, Stéphane, y faut arrêter le calva dès le matin ! ;-)
Il y a deux Pascal(s) sur ce groupe, cf. l'adresse e-mail différente
pour chacun de nous (bien que ça ne soit pas une preuve absolue).

Pour "attraper" un élément 'cible' qui aurait l'événement déclencheur,
on peut aussi faire :

var ev = ev || window.event;
var cible = ev.target || ev.srcElement;



C'est pas faux !
Mais pourquoi écrire en deux lignes ce qui tient en une ?
Enfin, on va pas se battre là-dessus, surtout que ton écriture est assez
courante dans les exemples du web.


--
Cordialement,
Pascal
Publicité
Poster une réponse
Anonyme