@@ -0,0 +1,99 @@ | |||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | |||
<html xmlns="http://www.w3.org/1999/xhtml"> | |||
<head> | |||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |||
<title>Bépodactyl : Exercices d'apprentissage de la disposition BÉPO</title> | |||
<script type="text/javascript" src="js/fonctions_texte.js"></script> | |||
<script type="text/javascript" src="js/functions_page.js"></script> | |||
<script type="text/javascript" src="js/exo.js"></script> | |||
<link rel="stylesheet" type="text/css" href="style.css" /> | |||
</head> | |||
<body onkeydown="get_key(event,'down')" onkeyup="get_key(event,'up')"> | |||
<div class="bar" id="bar"> | |||
<a href="http://tazzon.free.fr/dactylotest/"><img src="../home.png" alt="home" style="padding-bottom:2px"/></a> | |||
<a href="../dactylotest/" title="Testez votre vitesse de frappe">Dactylotest</a> | |||
<a href="../tridactyl/" title="Perfectionnez votre frappe grâce aux trigrammes">Tridactyl</a> | |||
<a href="../bepodactyl/" title="Bien débutez avec la disposition de clavier BÉPO">Bépodactyl</a> | |||
</div> | |||
<div class="head"> | |||
<h1>— Bépodactyl —</h1><br/> | |||
Exercices d'apprentissage de la disposition BÉPO. | |||
</div> | |||
<!--input type="text" id="set_time" /--> | |||
<div class="main"> | |||
<p> | |||
<input type="button" id="but_-" onclick="change_exo('-')" value="−"/> | |||
<input type="button" id="but_+" onclick="change_exo('+')" value="+"/> | |||
<input type="button" id="but_+" onclick="change_exo('=')" value="Recommencer"/> | |||
<input type="button" onClick="view_options('block')" value="Options" /> | |||
<input type="button" onClick="view_help('block')" value="?" /> | |||
</p> | |||
<br/> | |||
<div id="aff_kb"></div> | |||
<hr/> | |||
<div style="width:100%"><strong style="float:left;width:65%">Exercice nº<span id="exo_nb"></span></strong><span id="nb_vies" style="float:left;text-align:right;width:20%"></span></div> | |||
<br/><br/> | |||
<div class="ici" id="ici"> | |||
<p class="rd_txt" id="rd_txt"><span style="color:red"><strong>Javascript doit être activé ! Vous pouvez le faire en modifiant les préférences de votre navigateur. Si vous ne savez pas comment faire, consultez l'aide de celui-ci.</strong></span></p> | |||
<p>>> <input type="text" onkeyup="test(event)" onkeydown="" id="txt" class="txt"/></p> | |||
</div> | |||
<hr/> | |||
<div id="resultats" class="result"></div> | |||
</div> | |||
<div id="voile" class="voile"></div> | |||
<div id="options" class="options"> | |||
<p style="margin-bottom:10px"><strong>Options</strong><p> | |||
<p> | |||
<!--input type="checkbox" id="val_kb" checked="checked" onChange="aff_kb(this.checked)" /> Afficher l’image du clavier<br/--> | |||
Image du clavier<br/> | |||
<input type="radio" name="type_kb" id="type_kb" checked="checked" value="kb_decal" onChange="type_kb=this.value;aff_kb(true)" /> Clavier décalé<br/> | |||
<input type="radio" name="type_kb" id="type_kb" value="kb_typematrix" onChange="type_kb=this.value;aff_kb(true)" /> Typematrix<br/> | |||
<input type="radio" name="type_kb" id="type_kb" value="none" onChange="type_kb=this.value;aff_kb(false)" /> Pas de clavier<br/> | |||
<br/> | |||
<input type="checkbox" id="val_curseur" onChange="val_curseur(this.checked)" /> Activer le curseur<br/> | |||
<br/> | |||
<input type="checkbox" id="val_jeu" onChange="modejeu(this.checked)" /> Mode jeu<br/> | |||
<!--input type="checkbox" id="val_nbsp" checked="checked" onChange="nbspace=this.checked;ligne_suivante(true)" /> Utiliser les espaces insécables<br/--> | |||
<!--input type="checkbox" id="anti_correct" onChange="val_anti_correct(this.checked)" /> Activer l’anti-correction<br/--> | |||
</p> | |||
<p style="text-align:right;margin-top:10px"> | |||
<!--input type="button" onclick="valide_options()" value="Valider"/--> | |||
<input type="button" onclick="view_options('none')" value="Fermer"/> | |||
</p> | |||
</div> | |||
<div id="help" class="help"> | |||
<p style="margin-bottom:10px"><strong>Aide</strong><p> | |||
<p> | |||
Bépodactyl permet d’apprendre et de s’entraîner avec des exercices créés spécifiquement pour la disposition de clavier BÉPO. | |||
</p> | |||
<p> | |||
Pour cela, vous pouvez utiliser l’image virtuelle du clavier (voir les options) afin de ne pas regarder les touches de votre clavier et ainsi favoriser les réflexes musculaires. | |||
</p> | |||
<p> | |||
Commencer par les premiers exercices puis en fonction de votre progression passez aux suivants jusqu'à connaître le clavier sur le bout des doigts. Une fois que ce sera le cas, vous pourrez utiliser Dactylotest et prendre du plaisir à taper des textes le plus vite possible mais avec également le moins de fautes de frappe possible | |||
</p> | |||
<p style="text-align:right;margin-top:10px"> | |||
<input type="button" onclick="view_help('none')" value="Fermer"/> | |||
</p> | |||
</div> | |||
<script type="text/javascript" src="js/start.js"></script> | |||
</body> | |||
</html> | |||
@@ -0,0 +1,120 @@ | |||
var titre = new Array(); | |||
var conseil = new Array(); | |||
var exo = new Array(); | |||
var conseils = new Array(); | |||
var lettres = new Array(); | |||
conseils[0]=""; | |||
conseils[1]="Pour frapper les majuscules, utiliser l'auriculaire de la main opposée à celle qui tape la lettre. Ainsi, on doit utiliser l'auriculaire droit pour les majuscules AUIE et l'auriculaire gauche pour NRST."; | |||
conseils[2]="Pour le M et le Z, l'auriculaire droit doit s'étendre hors de sa colonne. La virgule et le É doivent être fait avec l’index gauche."; | |||
conseils[3]="Le K et le point se font avec la main gauche. L'apostrophe et le Q se font avec la main droite. L'apostrophe nécessite d'étirer un peu plus l'index. Attention à ne pas confondre les deux ! Le principe est toujours le même : la précision est bien plus importante que la rapidité."; | |||
conseils[4]="Attention, c’est bien l’annulaire gauche qui doit être utilisé pour faire le « Y » !"; | |||
conseils[5]="L'accent circonflexe (en dessous du point d'exclamation) et le tréma (en AltGr+I) doivent être tapés seuls. Vous ne verrez rien, mais l'accent apparaîtra sur la voyelle tapée ensuite. Un subtilité pour Ê, qui peut être obtenu de deux façons : par la 105ème touche du clavier Ê, ou avec l'accent circonflexe, puis le E."; | |||
conseils[6]="Une petite difficulté supplémentaire pour les deux points, le point-virgule, le point d'exclamation et le point d'interrogation qui doivent tous être précédés d'une espace insécable (représentée ici par « ␣ »), obtenue en maintenant la touche majuscule durant la frappe de l'espace. Conserver ensuite la touche majuscule appuyée pour la frappe du signe de ponctuation, qui est justement en majuscule lui-aussi. Ne pas oublier de relâcher avant la frappe de l'espace suivante."; | |||
conseils[7]="Une petite difficulté supplémentaire pour les guillemets ouverts qui doivent être suivis d'une espace insécable, ainsi que pour les guillemets fermés qui doivent être précédés d'une espace insécable, obtenue en maintenant la touche majuscule durant la frappe de l'espace."; | |||
conseils[8]="En guise de conclusion, voici des exercices où, à chaque ligne, on trouve toutes les lettres de l’alphabet : des pangrammes."; | |||
titre[0]="E, T, A, N (index et auriculaires)"; | |||
lettres[0]="etanETAN"; | |||
conseil[0]=0; | |||
exo[0]="et et et et et et et te te te te te te te###tee tee ette ette et et teet###an an an an an an an na na na na na na na###anna nana anan anna nana anan###en en en en ta ta ta ta ta ne ne ne ne ne###ane tate tante nana tata tete###tata et annette tannent ta tante###natte tentante et tente attenante###annette et tata tentent attentat en tente"; | |||
titre[1]="I et S (majeurs)"; | |||
lettres[1]="isIS"; | |||
conseil[1]=0; | |||
exo[1]="ss ii ss ii si si si is is is###isis et sissi sises###tes siestes et ses tasses###titi sieste et sissi tisse###sainte anne atteint ses antiennes###annette assiste insiste et atteste###satan est sienne si ta tante se tait###tante annette insistait et teintait sa tisane###sissi nantaise et titi sataniste naissent nantis###ni ses antennes ni ses tasses ne tentaient sa tante###annie est assise et anais a ses assiettes et ses tasses###anastasie tissait sa taie en satin et anne assistait assise en se taisant"; | |||
titre[2]="U et R (annulaires)"; | |||
lettres[2]="urUR"; | |||
conseil[2]=0; | |||
exo[2]="ur ur ur ru ru ru###rue rue rue eur eur eur eur###sanie sur un nanti est inane###sirius statue et nina sursaute###tu attises sans tester tes risettes###un narrateur rit et renie sa nature###tu essaies un instant et tu es saisi###tu eus une transe et tu te ratatinas###un statut saint unirait ses instituts###une eau saine et sans nitrates rassure###ses saisies insanes initient sa retraite###une instit tunisienne se tait en entrant###nina ruse et ne susurre rien au russe assis###un interne ruant sur rue ne saurait user sa rate###un artiste teint ses tartines et rature ses raies###en ratissant sa teinturerie sirius sent sa nature inerte###un assaut retentissant terrassa un tsar et instaura une terreur###un raisin rassis sustenterait un sarrasin sinistre et une tunisienne nantie en nuisette"; | |||
titre[3]="V et O (index)"; | |||
lettres[3]="voVO"; | |||
conseil[3]=1; | |||
exo[3]="vo vo vo ov ov ov###Nous envions votre aviation souveraine###Un toit en soie sur une tasse toute neuve###Un virtuose novateur et avenant renversait nos vies###Nous arriverons vers Tours via une autoroute toute neuve###Un visionnaire vivote et entrevoit un tournevis novateur###Nous savonnerons notre ventouse et retournerons notre veste###Une voisine a vu un avion en ivoire et une voiture innovante###Nous arriverons en vitesse et nous nous enivrerons en vos vins###On va vers une aventure vaseuse si on avoue avoir vu son invention"; | |||
titre[4]="P et D (majeurs)"; | |||
lettres[4]="pdPD"; | |||
conseil[4]=0; | |||
exo[4]="Nous nous disputons pour des prunes###Un papa panda divin parade au paradis###Nous parviendrons en Inde avant votre venue###Nous adoptons votre point de vue sur notre patriote###Un artiste peintre en peine a perdu de vue son inspiration###Un oiseau de proie est souvent suspendu au dessus de terre###Nous adoptons une attitude positive et nions avoir pris du poids###Votre titre de transport apatride vous sera repris avant de sortir de notre avion###Nous avons pour ainsi dire perdu notre inspiration et repoussons notre dispensaire"; | |||
titre[5]="É et L (annulaires)"; | |||
lettres[5]="élÉL"; | |||
conseil[5]=0; | |||
exo[5]="Ils étaient pourtant anéantis###Le ré et le la ont été entendus###Il a idéalisé son idole antirévolutionnaire###Un oiseau a des ailes et en réalité les avions aussi###Une eau désaltérante est la plus utile durant un été étoilé###Les dépolluants ont évolué et peuvent délivrer une eau saine###Nous avons pu altérer les évolutions prévues de notre Étoile en étain###Le député et le président ont été élus suite au vote sans surprise de la droite###Alerté par la radio un adulte daltonien a pu délivrer le latéral droit de Lens###Une révolutionnaire esseulée est délaissée par les prisonniers dépassés par les événements"; | |||
titre[6]="B et J (auriculaires), C (index droit)"; | |||
lettres[6]="bjBJcC"; | |||
conseil[6]=0; | |||
exo[6]="Je blablate beaucoup du jubilé de Platini###Je jubile devant une bien belle bijouterie###Je vous dis bienvenue dans le Libre via bépo###Bien entendu je vais juste jouer au jeune toubib###Nous balisons les jalons des joutes de javelot et de bouée###Bébé a avalé son jus de baies puis a beaucoup bavé###Le barbu a brutalisé un juré et la réponse du tribunal était terrible###Un bretteur battu a troublé les badauds obnubilés par son adresse au sabre###Jules abjura les jeunes et éblouit ses subordonnés débordants de jalousie"; | |||
titre[7]=", et È (index gauche), M et Z (auriculaire droit)"; | |||
lettres[7]=",èÈmzMZ"; | |||
conseil[7]=2; | |||
exo[7]="Le combat semble impossible, mais le succès demeurera une victoire intemporelle###Zou, il est temps de partir###Bleu, comme le ciel azuréen###La moutarde lui monte au nez###Vous devez votre ceinture abdominale###Un nez, un pic, un cap, une péninsule###Un zombie disparu et tout est dépeuplé###Libérez ce prisonnier insolent et malade###Vous entamez cette procédure très attentivement###Vous acclamerez sans problème ces émois juvéniles###Une émeute a éclaté, mais vous avez amnistié les meneurs###En Amazonie, les amateurs de meubles en acajou se réjouissent###Justement, vous pouvez ajuster cet alambic avec votre nez###Vous vous débarrassez de cet animal empaillé dont le nez empestait###Entre zèbres et zébus, la Zambie demeure accueillante###Treize litres de mazout déversés dans la mer, et le vizir est alarmé###Vous lézardez au son de cet air de jazz###Vous venez de commander votre seizième pizza, elle sera très moelleuse###Ce zélote zozote mais reste zen en zippant son blouson###Les trapézistes volent, une dizaine de zèbres parcourent la piste, et douze lézards ramassent les restes"; | |||
titre[8]="Ç et W"; | |||
lettres[8]="çwÇW"; | |||
conseil[8]=0; | |||
exo[8]="Les edelweiss poussent en altitude###Lawrence est un darwiniste convaincu###Le journaliste a interviewé le steward wallon###Avec une jupe en tweed et un sweat, je suis parée pour assister au spectacle de clowns###En ensemençant maintenant, nous aurons un beau jardin au printemps###La rançon demandée est désarçonnante###Il passait inaperçu et demeurait donc insoupçonnable###Nous vous avons aperçus puis reçus, comme ça, sans attendre###Le caleçon du maçon se coinça dans un escalier en colimaçon mal conçu, alors il menaça de poinçonner son remplaçant déçu###Elle a conçu un brownie tout simplement sublime###Dans ce western, les cavaliers sont souvent désarçonnés"; | |||
titre[9]="K . ' et Q (index)"; | |||
lettres[9]="kK.'qQ"; | |||
conseil[9]=3; | |||
exo[9]="J'ai la joie d'utiliser un point.###L'accueil d'une douzaine d'émirs est crucial.###Il s'est présenté tel quel.###Je joue tandis qu'il travaille.###L'aéronautique est souvent critiquée mais demeure un domaine de compétence.###Un enquiquineur de première classe.###Je viens d'acquérir un kiwi.###C'est anecdotique, mais l'acoustique de cette salle est remarquable.###Il a empaqueté son anorak et l'a embarqué pour Astrakan.###Après le cours de karaté, un bon cake te requinquera.###Le judoka qui est en kaki teste ton kaléidoscope.###Un cocktail suivra la kermesse. Les basketteurs seront présents, ainsi que les quelques rockeurs.###Après quelques vodkas, je serai partant pour un jerk et un rock endiablés.###J'ai acquis une belle aquarelle d'antiquaire, que je mettrai près de mon aquarium.###C'est dans la zone équatoriale que j'ai pu pratiquer l'équitation.###Cet ecclésiastique éloquent évoquait une escroquerie sans équivoque.###Je m'inquiète de ce qu'impliquent ces quatorze quatrains."; | |||
titre[10]="X et G (majeurs)"; | |||
lettres[10]="xgXG"; | |||
conseil[10]=0; | |||
exo[10]="J'exagère sans doute, mais l'état de mon gazon s'aggrave.###Les Anglais s'agglutinent dans cette agglomération.###Lorsqu'elle angoisse, elle ingurgite et engloutit des quantités astronomiques.###Nous avons obtenu l'agrément pour l'agrandissement de notre maison et l'aménagement de l'annexe.###L'agence nous a conseillé l'agriculture, mais l'élevage de grenouilles pourrait nous nuire.###Le matin, on conseille un bon verre de jus d'orange ou de tout autre agrume.###La gourmandise n'aide pas pour maigrir.###J'enrage car l'enregistrement que j'avais programmé a raté.###Mon garçon est ambidextre.###Avec mes index et mes majeurs, j'indexe des données qui avaient été annexées."; | |||
titre[11]="Y et H (annulaires)"; | |||
lettres[11]="yhYH"; | |||
conseil[11]=4; | |||
exo[11]="J'espère hypnotiser les sénateurs avec les chrysanthèmes disséminés dans l'hémicycle.###Les polytechniciens aussi ont besoin de s'hydrater.###C'est avec du rythme que le saxophoniste et le psychiatre joueur de synthé pourront se synchroniser.###Un asthmatique en crise présente une inspiration maximale qui abaisse le diaphragme, repousse les abdominaux et gonfle le thorax.###Je suis chez ce cher Serge, cherchant des chers cierges, assis sur des chers sièges.###Le chiche, son chicha et son chien sont souvent chez Sanson ou chez Charles sans se soucier de sa sécheuse sèche."; | |||
titre[12]="À et F (auriculaires)"; | |||
lettres[12]="àfÀF"; | |||
conseil[12]=0; | |||
exo[12]="Riri, Fifi et Loulou.###Pif, paf, pouf.###Et voilà, on a fait le tour de toutes les touches.###Le bépo, c'est facile, finalement.###À partir de maintenant, il suffira de faire quelques derniers petits efforts."; | |||
titre[13]="Accents morts ^ et ¨ (Ê, Î, Û, Â, Ô, Ï, Ä)"; | |||
lettres[13]="^¨êÊ"; | |||
conseil[13]=5; | |||
exo[13]="Être ou ne pas être.###Peut-être bien que oui.###Il paraît qu'un bon feu dans l'âtre contribue au bien-être.###Il est sûr et certain.###La brebis a dû paître à côté.###La laïcité peut être ambiguë.###Le canoë est emporté dans un maelström.###C'est la belle nuit de Noël.###Ma trisaïeule hébraïque raffole de l'aïoli.###Les paranoïaques poussent des cris suraigüs."; | |||
titre[14]="Touches en AltGr (Ù, Œ, Æ)"; | |||
lettres[14]="ùœæÙŒÆ"; | |||
conseil[14]=0; | |||
exo[14]="Où que soit cet œuf.###Qui vole un œuf, vole un bœuf.###Curriculum Vitæ.###Et cætera.###Lætitia et Éric sont arrivés ex æquo.###Où qu'il soit, il y est.###Je ne sais où ni quand."; | |||
titre[15]="Tiret et point d'interrogation (avec espace insécable)"; | |||
lettres[15]="-?" | |||
conseil[15]=6; | |||
exo[15]="Les chaussettes de l'archi-duchesse sont-elles sèches, archi-sèches ?###Où est-il ?###Que se passe-t-il ?###Qu'est-il arrivé ?###Qu'y a-t-il ?###Peut-être est-il trop tard."; | |||
titre[16]="Ponctuation double (; : !) et espace insécable"; | |||
lettres[16]=";:!"; | |||
conseil[16]=6; | |||
exo[16]="Et revoilà la sous-préfète !###La voilà ; elle arrive !"; | |||
titre[17]="Parenthèses"; | |||
lettres[17]="()"; | |||
conseil[17]=0; | |||
exo[17]="World Wide Web (www)"; | |||
titre[18]="Guillemets"; | |||
lettres[18]="«»"; | |||
conseil[18]=7; | |||
exo[18]="la Haute Autorité pour la Diffusion des Œuvres et la Protection des Droits sur Internet ou « HADOPI »"; | |||
titre[19]="Pangrammes"; | |||
lettres[19]=""; | |||
conseil[19]=8; | |||
exo[19]="Vif PDG mentor, exhibez la squaw jockey.###Juge, flambez l'exquis patchwork d'Yvon.###Vif juge, trempez ce blond whisky aqueux.###Fripon, mixez l'abject whisky qui vidange.###Buvez de ce whisky que le patron juge fameux.###Portez ce vieux whisky au juge blond qui fume.###Jugez qu'un vieux whisky blond pur malt fonce.###Faux kwachas ? Quel projet de voyage zambien !###Fougueux, j'enivre la squaw au pack de beau zythum.###Ketch, yawl, jonque flambant neuve… jugez des prix !###Vieux pelage que je modifie : breitschwanz ou yak ?###Prouvez, beau juge, que le fameux sandwich au yak tue.###Voyez ce jeu exquis wallon, de graphie en kit mais bref."; | |||
titre[20]="Pangrammes accentués"; | |||
lettres[20]=""; | |||
conseil[20]=0; | |||
exo[20]="Perchez dix, vingt woks. Qu'y flambé-je ?###Le moujik équipé de faux breitschwanz voyage.###Kiwi fade, aptéryx, quel jambon vous gâchez !###Voyez le brick géant que j'examine près du wharf.###Bâchez la queue du wagon-taxi avec les pyjamas du fakir.###Mon pauvre zébu ankylosé choque deux fois ton wagon jaune.###Voix ambiguë d'un cœur qui, au zéphyr, préfère les jattes de kiwis."; |
@@ -0,0 +1,283 @@ | |||
/******************************************************************************* | |||
Toutes les fonctions liées à la frappe, erreurs, curseurs… | |||
*******************************************************************************/ | |||
la_couleur_du_curseur = "#7cfc00"; | |||
//cette fonction compare le texte tapé à « le_texte » | |||
var val=""; //c'est le contenu du champ texte | |||
var val_temp=""; //le texte juste avant pour l'anti-correction | |||
var txt_frap = new Array; // on stock dans ce tableau les différentes lignes de texte que l'on vient de taper | |||
var recommencer = false; | |||
var nb_err = 0; | |||
var nb_recom = 0; // nombre de fois qu'on a recommencé la ligne | |||
var nb_tentatives_recom = 3 // nombre de tentatives par ligne avant de passer à la suivante et de repasser la ligne manquée à la fin de l'exercice | |||
function test(e) | |||
{ | |||
// entrer retourne le code 13 | |||
var touche = window.event ? e.keyCode : e.which; | |||
//if (touche == 32) | |||
//nb_sp++; | |||
//alert(touche) | |||
if (touche == 16 || touche == 225 || touche == 17 || touche == 18 || touche == 27 || touche == 9 || touche == 20 || touche == 91 || touche == 93 || (touche >=112 && touche <=123) ) // shift || ctrl || alt || échap || tab || caps-lock || super || menu || F1 à F12 | |||
return; | |||
if (touche == 13 && recommencer == false && val.length <le_texte[l-1].length) | |||
return; | |||
if (touche == 8 && anti_correct) // anti correction | |||
{ | |||
document.getElementById("txt").value = val_temp; | |||
return; | |||
} | |||
val = document.getElementById("txt").value; //le texte qu'on tape | |||
if (val.substr(val.length-1,1) != le_texte[l-1].substr(val.length-1,1) && val.length-1 != le_texte[l-1].length && val.length != 0) | |||
{ | |||
document.getElementById("txt").style.backgroundColor = "#ffbbbb"; | |||
col_cur = "red"; | |||
if (recommencer == false) | |||
nb_err++; | |||
recommencer = true; | |||
document.getElementById("resultats").innerHTML = '<strong style="color:red">Faites Entrée ou terminez la ligne pour la recommencer sans faute ('+(nb_recom+1)+'/'+nb_tentatives_recom+').</strong>'; | |||
} | |||
if (touche == 13 || val.length >= le_texte[l-1].length+1) | |||
{ | |||
if (val.substr(val.length-1,1) == " ") | |||
val = val.substr(0,val.length-1); | |||
txt_frap[l-1] = val; | |||
document.getElementById("txt").value = ""; | |||
ligne_suivante(); | |||
val_temp=""; | |||
return; | |||
} | |||
color_car(); | |||
val_temp=val; | |||
} | |||
function next(e) | |||
{ | |||
var touche = window.event ? e.keyCode : e.which; | |||
val = document.getElementById("txt").value; //le texte qu'on tape | |||
if (le_texte[l-1].substr(val.length,1) == " " && touche != 8 && touche != 13) // si c'est une espace qui est prévue et si c'est pas un retour un arrière car un cas de retour vu qu'on remet le car si c'est une esapace, ça fait qu'on passe au mot suivant | |||
color_mot("next"); | |||
if (le_texte[l-1].substr(val.length-1,1) == " " && touche == 8) | |||
color_mot("prev"); | |||
} | |||
function live_var() | |||
{ | |||
var content = ""; | |||
content = "l="+l+" ; recommencer="+recommencer+" ; nb_recom="+nb_recom+"<br/>"; | |||
content += "le_texte.length="+le_texte.length+"<br/>"; | |||
for (var i=0 ; i < le_texte.length ; i++) | |||
content += le_texte[i]+"<br/>"; | |||
document.getElementById("resultats").innerHTML = content; | |||
} | |||
nbspace = true; | |||
function nbsp_mode() | |||
{ | |||
if (nbspace == false) | |||
{ | |||
return le_texte.replace("/ /"," "); | |||
} | |||
} | |||
// pour passer à la ligne suivante de la leçon | |||
var l = 0; | |||
function ligne_suivante(reload) | |||
{ | |||
if(reload) | |||
l--; | |||
col_cur = la_couleur_du_curseur; | |||
document.getElementById("txt").style.backgroundColor = "inherit"; | |||
if (recommencer == true && nb_recom < (nb_tentatives_recom-1)) | |||
{ | |||
l--; | |||
nb_recom++; | |||
} | |||
else if (recommencer == true && nb_recom >= (nb_tentatives_recom-1) ) | |||
{ | |||
if (le_texte[l-1]) | |||
le_texte[le_texte.length] = le_texte[l-1]; | |||
nb_recom = 0; | |||
} | |||
//else if (recommencer == false && nb_recom < (nb_tentatives_recom-1)) | |||
else if (recommencer == false) | |||
{ | |||
nb_recom = 0; | |||
} | |||
if (mode_jeu == true) | |||
{ | |||
if (recommencer == true) | |||
vies--; | |||
else | |||
vies++; | |||
document.getElementById("nb_vies").innerHTML = make_heart(); | |||
if (vies == 0) | |||
{ | |||
document.getElementById("rd_txt").innerHTML = ""; | |||
document.getElementById("resultats").innerHTML = "<strong>Game Over</strong>"; | |||
return; | |||
} | |||
} | |||
document.getElementById("resultats").innerHTML = ""; | |||
if (conseil[exo_en_cours] != 0) | |||
document.getElementById("resultats").innerHTML = "<strong>Conseil</strong> : "+conseils[conseil[exo_en_cours]]; | |||
//alert(le_texte.length); | |||
if (l == le_texte.length) | |||
{ | |||
l=0; | |||
aff_result(); | |||
} | |||
else | |||
{ | |||
var col_ligne = new Array("inherit","#bbbbbb","#d4d4d4","#eeeeee"); | |||
var mark_ligne = new Array(">> "," "," "," "); | |||
var txt=""; | |||
document.getElementById("rd_txt").innerHTML = ""; | |||
var ligne_tab = new Array(); | |||
for (var i=0 ; i<4 ; i++) | |||
{ | |||
if (l+i < le_texte.length)// il faut qu'il reste des lignes | |||
{ | |||
if (i==0) // première ligne pour avoir le curseur | |||
{ | |||
//on découpe le tout pour le reconstituer ensuite avec des span identifiant chaque mot (pour le curseur) | |||
var reg = new RegExp("","g"); | |||
var ligne_tmp = le_texte[l+i].split(reg); | |||
for (var j=0 ; j<ligne_tmp.length ; j++) | |||
{ | |||
if (ligne_tmp[j] == " ") // si c'est une espace insécable | |||
{ | |||
if(nbspace == true) | |||
ligne_tmp[j] = '<span id="car_'+j+'">␣</span>'; | |||
else | |||
ligne_tmp[j] = '<span id="car_'+j+'"> </span>'; | |||
} | |||
else | |||
ligne_tmp[j] = '<span id="car_'+j+'">'+ligne_tmp[j]+'</span>'; | |||
} | |||
txt=ligne_tmp.join("")+'<span id="car_'+j+'"> </span>'; | |||
//alert(txt); | |||
} | |||
else | |||
{ | |||
txt=le_texte[l+i]; | |||
} | |||
//alert(txt); | |||
ligne_tab[i] = '<span style="color:'+col_ligne[i]+'">'+mark_ligne[i]+txt+'</span><br/>'; | |||
} | |||
} | |||
l++; | |||
} | |||
document.getElementById("rd_txt").innerHTML = ligne_tab.join(""); | |||
recommencer = false; | |||
color_car("init"); | |||
//live_var(); | |||
//document.getElementById("resultats").innerHTML = "l="+l+"<br/>"+le_texte[l-1]; | |||
} | |||
function val_curseur(a) | |||
{ | |||
if(a) | |||
{ | |||
col_cur = la_couleur_du_curseur; | |||
cur_checked = "checked"; | |||
} | |||
else | |||
{ | |||
col_cur = "inherit"; | |||
cur_checked = ""; | |||
} | |||
//color_mot(); | |||
color_car(); | |||
} | |||
var anti_correct = false; | |||
function val_anti_correct(a) | |||
{ | |||
anti_correct = false; | |||
if (a == true || a == "init") | |||
anti_correct = true; | |||
if (anti_correct) | |||
document.getElementById("anti_correct").checked = "checked"; | |||
else | |||
document.getElementById("anti_correct").checked = ""; | |||
} | |||
var colw = 0; | |||
var col_cur = la_couleur_du_curseur; // couleur du curseur | |||
function color_car(a) | |||
{ | |||
if (a == "init") | |||
colw = 0; | |||
else | |||
colw = document.getElementById("txt").value.length; | |||
for (var i = 0 ; i < le_texte[l-1].length ; i++) | |||
{ | |||
if (document.getElementById("car_"+i)) | |||
document.getElementById("car_"+(i)).style.backgroundColor = "inherit"; | |||
} | |||
if (document.getElementById("car_"+colw)) | |||
document.getElementById("car_"+colw).style.backgroundColor = col_cur; | |||
} | |||
function aff_result() // replacer les undefined par des espaces insécables (pour l'affichage) | |||
{ | |||
var txt=""; | |||
if(nb_err > 5) | |||
txt = " Il semblait que vous maîtrisiez pas encore totalement cette exercice, vous pouvez le recommencer si vous le souhaitez."; | |||
if (nb_err == 0) | |||
document.getElementById("resultats").innerHTML = "Félicitations ! Vous n'avez fait aucune erreur !"; | |||
else if (nb_err < 2) | |||
document.getElementById("resultats").innerHTML = "Vous avez fait "+nb_err+" erreur."; | |||
else | |||
document.getElementById("resultats").innerHTML = "Vous avez fait "+nb_err+" erreurs."+txt; | |||
document.getElementById("rd_txt").innerHTML = ""; | |||
nb_err = 0; | |||
txt_frap = new Array(); // ré-init variable | |||
} | |||
@@ -0,0 +1,353 @@ | |||
/******************************************************************************* | |||
Toutes les fonctions liées à la page pour le gestion des cadres des options, | |||
demande d'un nouveau texte… | |||
*******************************************************************************/ | |||
//cette fonction permet d'avoir un nouveau texte | |||
var exo_en_cours = 0; // la leçon en cours // le numéro de la leçon | |||
var cur_checked = "checked"; | |||
var le_texte=new Array(); | |||
var vies = 2; | |||
function change_exo(a) | |||
{ | |||
if (a=="+" && exo_en_cours<exo.length-1) | |||
exo_en_cours++; | |||
else if (a=="-" && exo_en_cours>0) | |||
exo_en_cours--; | |||
new_text(exo_en_cours); | |||
} | |||
function new_text(a) | |||
{ | |||
//on réinitialise les variables | |||
le_texte = new Array; | |||
recommencer = false; | |||
nb_recom=0; | |||
l=0; // la ligne en cours | |||
if (!a) // si le numéro de l'exercice n'est pas défini | |||
a=0; // on choisi par défaut le premier (donc le 0) | |||
exo_en_cours = a; // permet de connaître globalement sur quel exo on se trouve | |||
var reg = new RegExp("###","g"); | |||
le_texte = exo[a].split(reg); | |||
document.getElementById("resultats").innerHTML = ""; // efface la zone de résulats | |||
document.getElementById("txt").value = ""; // efface le texte frappé //on efface le texte précédement tapé | |||
document.getElementById("txt").focus(); // donne le focus à la zone de frappe | |||
document.getElementById("exo_nb").innerHTML = (a+1) +" : "+titre[a]; // affiche le numéro de l'exo (+1 pour faire joli) et le titre de l'exercice | |||
//vies = 2; | |||
if (mode_jeu) | |||
document.getElementById("nb_vies").innerHTML = make_heart(); | |||
else | |||
document.getElementById("nb_vies").innerHTML = ""; | |||
ligne_suivante(); | |||
// ce qui suit permet de griser les boutons [-] et [+] | |||
document.getElementById("but_+").style.color = "inherit"; | |||
document.getElementById("but_+").style.borderColor = "inherit"; | |||
document.getElementById("but_-").style.color = "inherit"; | |||
document.getElementById("but_-").style.borderColor = "inherit"; | |||
if (exo_en_cours == 0) | |||
{ | |||
document.getElementById("but_-").style.color = "grey"; | |||
document.getElementById("but_-").style.borderColor = "grey"; | |||
} | |||
if (exo_en_cours == exo.length-1) | |||
{ | |||
document.getElementById("but_+").style.color = "grey"; | |||
document.getElementById("but_+").style.borderColor = "grey"; | |||
} | |||
color_key(); // colorisation des touches du clavier | |||
} | |||
function view_options(action) | |||
{ | |||
if (action == "") | |||
return; | |||
document.getElementById("options").style.display = action; | |||
document.getElementById("voile").style.display = action; | |||
if (action == "block") | |||
document.getElementById("txt").blur(); | |||
if (action == "none") | |||
document.getElementById("txt").focus(); | |||
} | |||
function view_help(action) | |||
{ | |||
if (action == "") | |||
return; | |||
document.getElementById("help").style.display = action; | |||
document.getElementById("voile").style.display = action; | |||
if (action == "block") | |||
document.getElementById("txt").blur(); | |||
if (action == "none") | |||
document.getElementById("txt").focus(); | |||
} | |||
var mode_jeu = false; | |||
function modejeu(a) | |||
{ | |||
if (a) | |||
{ | |||
mode_jeu = true; | |||
vies = 2; | |||
} | |||
else | |||
mode_jeu = false; | |||
} | |||
function make_heart() | |||
{ | |||
var coeur="❤ "; | |||
var nb_vies=""; | |||
/*for (var i=0 ; i<vies ; i++) | |||
{ | |||
nb_vies+=coeur; | |||
}*/ | |||
return vies+' <span style="color:red">'+coeur+'</span>'; | |||
} | |||
function options(e) | |||
{ | |||
//var touche = window.event ? e.keyCode : e.which; | |||
//alert(touche); | |||
} | |||
var type_kb = "kb_decal"; | |||
function aff_kb(a) | |||
{ | |||
if (a == true) | |||
type_clavier(type_kb); | |||
else | |||
type_clavier("none"); | |||
} | |||
function type_clavier(a) | |||
{ | |||
if (a == "none") | |||
{ | |||
document.getElementById("aff_kb").innerHTML=""; | |||
return; | |||
} | |||
if (a == "kb_decal") | |||
document.getElementById("aff_kb").innerHTML=kb_decal(); | |||
if (a == "kb_typematrix") | |||
document.getElementById("aff_kb").innerHTML=kb_typematrix(); | |||
//document.getElementById("aff_kb").innerHTML=kb_typematrix(); | |||
//document.getElementById("aff_kb").innerHTML=kb_decal(); | |||
//document.getElementById("aff_kb").innerHTML='<img src="bepo-standard.png" alt="clavier bépo" />'; | |||
color_key(); | |||
} | |||
var shift_down = false; | |||
var altgr_down = false; | |||
function get_key(e,action) | |||
{ | |||
var touche = window.event ? e.keyCode : e.which; | |||
//alert(touche + " " + action); | |||
if(action == "down") //on enfonce la touche | |||
{ | |||
if (touche== 16) //shift | |||
shift_down = true; | |||
if (touche == 17 || touche == 225) //altgr linux = 225 ; win = 17 ??? étrange | |||
altgr_down = true; | |||
} | |||
if(action == "up") | |||
{ | |||
if (touche== 16) //shift | |||
shift_down = false; | |||
if (touche == 17 || touche == 225) //altgr | |||
altgr_down = false; | |||
} | |||
if (shift_down == true && altgr_down == true) | |||
layout = bepo_4; | |||
if (shift_down == true && altgr_down == false) | |||
layout = bepo_2; | |||
if (shift_down == false && altgr_down == true) | |||
layout = bepo_3; | |||
if (shift_down == false && altgr_down == false) | |||
layout = bepo_1; | |||
for (var k = 0 ; k < layout.length ; k++) | |||
{ | |||
if(document.getElementById("k"+k)) | |||
document.getElementById("k"+k).innerHTML = layout.charAt(k); | |||
} | |||
color_key(); | |||
} | |||
function color_key() | |||
{ | |||
var a; | |||
var b; | |||
var exo_pre=""; | |||
for (var key=0 ; key < 48 ; key++) | |||
{ | |||
if (document.getElementById("k"+key)) | |||
document.getElementById("k"+key).style.backgroundColor = "inherit"; | |||
} | |||
for (var i = 0 ; i < exo_en_cours ; i++) | |||
{ | |||
exo_pre += lettres[i]; | |||
//alert(exo_pre); | |||
} | |||
for (var key=0 ; key < 48 ; key++) | |||
{ | |||
if (document.getElementById("k"+key)) | |||
{ | |||
a = document.getElementById("k"+key).innerHTML; | |||
for (var lettre = 0 ; lettre < exo_pre.length ; lettre++) | |||
{ | |||
b = exo_pre.charAt(lettre); | |||
//alert(key+" _" +a+"_ _"+b+"_"); | |||
if ( a == b && document.getElementById("k"+key) ) | |||
document.getElementById("k"+key).style.backgroundColor = "#c1f7ad"; | |||
} | |||
for (var lettre = 0 ; lettre < lettres[exo_en_cours].length ; lettre++) | |||
{ | |||
b = lettres[exo_en_cours].charAt(lettre); | |||
//alert(key+" _" +a+"_ _"+b+"_"); | |||
if ( a == b && document.getElementById("k"+key) ) | |||
document.getElementById("k"+key).style.backgroundColor = "#7cfc00"; | |||
} | |||
} | |||
} | |||
//document.getElementById("k"+key).style.backgroundColor = col; | |||
} | |||
var bepo_1 = "$\"«»()@+-/*=%bépoè^vdljzwauie,ctsrnmçêàyx.k'qghf"; | |||
var bepo_2 = "#1234567890°`BÉPOÈ!VDLJZWAUIE;CTSRNMÇÊÀYX:K?QGHF"; | |||
var bepo_3 = "–—<>[] | &œ ¡ æù¨€’ \\{}… ¿ "; | |||
var bepo_4 = " „“”≤≥ ˝ Œ ÆÙ ‘’· "; | |||
/* | |||
var bepo_1 = "²&é\"'(-è_çà)=azertyuiop^$qsdfghjklmù*<wxcvbn,;:!"; | |||
var bepo_2 = " 1234567890°+AZERTYUIOP¨₤QSDFGHJKLM%µ>WXCVBN?./§"; | |||
var bepo_3 = " ~#{[|`\\^@]} € "; | |||
var bepo_4 = " "; | |||
*/ | |||
var k=0; | |||
function kb_decal() | |||
{ | |||
var row_dec = new Array(0,35,41,28); | |||
var key_per_row = new Array(13,12,12,11); | |||
k=0; | |||
var row=0; | |||
var diff=0; | |||
var kb= '<div class="kb">'; | |||
for (var i = 0 ; i < 4 ; i++) | |||
{ | |||
for(var j = 0 ; j < key_per_row[i] ; j++) | |||
{ | |||
k105=""; | |||
if(k==37) | |||
k105="border:dashed 1px black;"; | |||
if(j == 0) | |||
kb += '<div style="'+k105+'margin-left:'+row_dec[i]+'px" class="key" id="k'+k+'">'+bepo_1.charAt(k)+'</div>'; | |||
else | |||
kb += '<div class="key" id="k'+k+'">'+bepo_1.charAt(k)+'</div>'; | |||
k++; | |||
} | |||
kb += '<div style="clear:both"></div>'; | |||
} | |||
kb += '</div>'; | |||
return kb; | |||
} | |||
function kb_typematrix() | |||
{ | |||
var row_dec = new Array(0,26,26,26); | |||
var key_per_row = new Array(13,12,11,11); | |||
var key_space = new Array(6,5,5,5); | |||
k=0; | |||
var row=0; | |||
var kb= '<div class="kb">'; | |||
for (var i = 0 ; i < 4 ; i++) | |||
{ | |||
for(var j = 0 ; j < key_per_row[i] ; j++) | |||
{ | |||
if(k == 48) | |||
k=36; | |||
if(j == 0) | |||
kb += '<div style="margin-left:'+row_dec[i]+'px" class="key" id="k'+k+'">'+bepo_1.charAt(k)+'</div>'; | |||
else if(j == key_space[i]) | |||
kb += '<div style="margin-left:20px" class="key" id="k'+k+'">'+bepo_1.charAt(k)+'</div>'; | |||
else | |||
kb += '<div class="key" id="k'+k+'">'+bepo_1.charAt(k)+'</div>'; | |||
k++; | |||
if(k == 36) | |||
k=38; | |||
} | |||
kb += '<div style="clear:both"></div>'; | |||
//k=48; // pour avoir le nombre total de touche | |||
} | |||
kb += '</div>'; | |||
return kb; | |||
} | |||
@@ -0,0 +1,8 @@ | |||
/******************************************************************************* | |||
À inclure en fin de page pour le démarrage | |||
*******************************************************************************/ | |||
document.getElementById("rd_txt").innerHTML = ""; // effacement du message javascipt | |||
new_text(); | |||
document.getElementById("val_curseur").checked = cur_checked; | |||
aff_kb(true); |
@@ -0,0 +1,242 @@ | |||
.bar { | |||
background-color:black; | |||
/*z-index:150;*/ | |||
width:99%; | |||
/*border:1px black dotted;*/ | |||
padding:3px; | |||
margin:auto; | |||
} | |||
a, a:visited { | |||
color:#003399; | |||
text-decoration:none; | |||
} | |||
a:hover { | |||
text-decoration:underline; | |||
} | |||
.bar a,a:visited { | |||
margin:10px; | |||
text-decoration:none; | |||
color:#fafafa; | |||
} | |||
.bar a:hover { | |||
color:#7cfc00; | |||
} | |||
body { | |||
margin:0; | |||
padding:0; | |||
background-color:#fafafa; | |||
color: black; | |||
font-size: 14px; | |||
font-family:monospace; | |||
} | |||
.head { | |||
text-align:center; | |||
margin-bottom:70px; | |||
} | |||
h1 { | |||
margin-bottom:-15px | |||
} | |||
p { | |||
margin:0; | |||
padding:0px 0px 0px 0px; | |||
} | |||
/*.kb { | |||
border:1px solid black; | |||
border-radius:3px; | |||
background-color:gray; | |||
padding:2px; | |||
width:inherit; | |||
margin:auto; | |||
}*/ | |||
.key { | |||
border:1px solid black; | |||
border-radius:3px; | |||
margin:2px; | |||
width:20px; | |||
height:20px; | |||
text-align:center; | |||
vertical-align:middle; | |||
background-color:white; | |||
float:left; | |||
} | |||
input[type=button] { | |||
border:1px black solid; | |||
background-color:#ebebeb; | |||
font-size: 12px; | |||
color: black; | |||
font-family: monospace; | |||
margin-bottom:3px; | |||
-moz-border-radius: 5px; | |||
border-radius:5px; | |||
} | |||
.full_width { | |||
width:100%; | |||
text-align:center; | |||
} | |||
input[type=button]:hover { | |||
background-color:#fafafa; | |||
} | |||
input[type=text] { | |||
font-size: 14px; | |||
color: black; | |||
font-family: monospace; | |||
} | |||
hr { | |||
border-top : solid 1px #cccccc; | |||
border-bottom : none; | |||
border-left:none; | |||
border-right:none; | |||
margin-bottom:30px; | |||
margin-top:30px; | |||
} | |||
select { | |||
border:none; | |||
font-family:monospace; | |||
font-size:14px; | |||
background-color:#fafafa; | |||
width:40px; | |||
} | |||
img { | |||
vertical-align:middle; | |||
} | |||
.main { | |||
/*text-align:center;*/ | |||
width:750px; | |||
margin:auto; | |||
} | |||
.text_nmbr { | |||
width:100%; | |||
border:none; | |||
text-align:left; | |||
} | |||
.err { | |||
visibility:hidden; | |||
color:red; | |||
font-weight:bold; | |||
font-size:18px; | |||
background-color:#ffbbbb; | |||
} | |||
.new_text { | |||
border:none; | |||
text-align:left; | |||
padding:5px; | |||
font-family:monospace; | |||
font-size:14px; | |||
} | |||
.options { | |||
border:none; | |||
text-align:left; | |||
width:300px; | |||
float:left; | |||
padding:0px 5px 5px 5px; | |||
font-family:monospace; | |||
font-size:14px; | |||
} | |||
.view_options { | |||
display:block; | |||
} | |||
.result { | |||
/*float:right;*/ | |||
text-align:left; | |||
/*width:420px;*/ | |||
width:748px; | |||
padding:5px; | |||
font-family:monospace; | |||
font-size:14px; | |||
} | |||
.txt { | |||
border:1px #777777 dashed; | |||
border-top:none; | |||
border-right:none; | |||
border-left:none; | |||
background-color:#fafafa; | |||
width:680px; | |||
/*height:240px;*/ | |||
font-family:monospace; | |||
font-size:14px; | |||
margin-bottom:5px; | |||
} | |||
.rd_txt { | |||
/*border:1px black solid;*/ | |||
/*height:auto;*/ | |||
/*color:white;*/ | |||
text-align:left; | |||
width:748px; | |||
height:80px; | |||
font-family:monospace; | |||
font-size:14px; | |||
/*text-align:justify;*/ | |||
/*background-color:grey;*/ | |||
} | |||
/*a, a:visited { | |||
color:#003399; | |||
text-decoration:none; | |||
} | |||
a:hover { | |||
text-decoration:underline; | |||
} */ | |||
.d_replay { | |||
visibility:visible; | |||
float:right; | |||
} | |||
.options { | |||
display:none; | |||
padding:10px; | |||
position:absolute; | |||
z-index:2; | |||
width:300px; | |||
border:solid black 1px; | |||
top:200px;left:50%; | |||
margin-left:-150px; | |||
background-color:#fafafa; | |||
border-radius:10px; | |||
} | |||
.options a, a:visited { | |||
color:#003399; | |||
text-decoration:none; | |||
} | |||
.options a:hover { | |||
text-decoration:underline; | |||
} | |||
.help { | |||
display:none; | |||
padding:10px; | |||
position:absolute; | |||
z-index:2; | |||
width:600px; | |||
border:solid black 1px; | |||
top:150px;left:50%; | |||
margin-left:-300px; | |||
background-color:#fafafa; | |||
border-radius:10px; | |||
} | |||
.help p { | |||
padding-bottom:10px | |||
} | |||
.voile { | |||
display:none; | |||
background-color:black; | |||
opacity:0.5; | |||
position:absolute; | |||
top:0; | |||
left:0; | |||
z-index:1; | |||
width:100%; | |||
height:100%; | |||
} | |||