Tafels met javascript deel 2

[JeroenE]

Hallo mede-helpmijers,

In deze topic stelde ik een vraag die door Egel perfect opgelost werd.

Nu heb ik een vervolg kunnen bedenken.

Ik heb de pagina aangepast (het origineel van Egel heb ik behouden, wees gerust ) zoals in bijlage.

De bedoeling is dat variabele b wordt vastgesteld als zijnde de waarde die in de input chooseTable (de input type radio bovenaan) geselecteerd is.

Ik krijg echter blijvend de foutmelding :

document.tableForm.chooseTable[...].value is leeg of geen object

Ik heb mijn beperkte kennis javascript helemaal uitgetest, voor zover die uit te testen valt, en vind de oplossing niet.

Wie kan mij helpen.
Thx.

Greetz : Jeren.

 

[Egel]

Het orgineel altijd bewaren!

var c = document.tableForm.chooseTable;
for (var i = 0; i < c.length; i++) {
 if (c[i].checked) b = c[i].value;
 };

bij case 2: showSum(i,a*b,":",b); answer = a;
bij showSum: f.two.value = b;


Greetz, Egel.

 

[JeroenE]

Hey Egel,

Bedankt om nog maar eens te helpen :thumb: .

Weerom werkt het perfect.

Greetz : Jeren.

 

[Egel]

Graag gedaan!

Groet, Egel.

(Ik had m'n bijlage net vervangen, misschien dat het daar even mis ging.)

 

[JeroenE]

(Ik had m'n bijlage net vervangen, misschien dat het daar even mis ging.)

Het was mijn fout. Ik heb de var i veranderd in een var j omdat ik dacht dat je maar 1 keer dezelfde var-name kunt gebruiken binnen een functie en c.checked laten staan in plaats van er c[j].checked van te maken.
Ben er ondertussen achter dat die enkel binnen de loop telde en opnieuw kon gebruikt worden.

Greetz : Jeren.

 

[mooncrawler]

Excellente scripter, die Egel.
Niets, maar dan ook niets dan lof.

 

[JeroenE]

Geplaatst door mooncrawler
Excellente scripter, die Egel.
Niets, maar dan ook niets dan lof.

Daar moet ik je volledig in bijtreden mooncrawler.
En dat motiveert mij des te meer om verder javascript te leren.

Greetz : Jeren.

 

[Egel]

bedankt!


Ik heb het nog wat verbeterd:
- ipv rondjes buttons die meteen nieuwe opgaven maken,
- er zijn maar 2 tekstvelden per som, opgave en antwoord,
- de vormgeving is mooier.

Nu maar hopen dat ze inmiddels nog niet alle tafels kent.
De tafel van 7 is het moeilijkst herinner ik me.


Vr.Gr. Egel.

 

[Egel]

De tafels in html:

 

[JeroenE]

Dank je wel, Egel.
Dat is gewoon schitterend. :thumb:

Thx.

Wees gerust, ze moet nog wat leren voor ze alle tafels kent.

Greetz : Jeren.

 

[JeroenE]

Hallo Egel,

Ik heb het script een klein beetje aangepast zodat het volledig doet wat ik oorspronkelijk wilde.

Wil je eens nagaan of het korter kan en of er geen bugs in zitten?

Thx. :thumb:

Greetz : Jeren.

 

[Egel]

:thumb:

Dat ziet er goed uit!


Alleen komt er bij de knop Tafels nog NaN in de sommen te staan omdat je 'Tafels' met een getal vermenigvuldigd.

NaN staat voor Not a Number, het is een soort van foutmelding.
NaN is zelfs ongelijk aan NaN: assert(NaN != NaN);

d.choose[nr].value veroorzaakt dat als nr == 0, maar dat is wel op te lossen met (nr > 0 ? nr : dobbel(9) + 1) oid.


Ik ga me nog wat beter inlezen hoe je dit gemaakt hebt en of het eventueel korter kan.


Greetz, Egel.

 

[JeroenE]

Ik heb het volgende geprobeerd :

<input type="button" name="choose" class="c" value="Tafels"
onClick="setTables(Math.ceil(Math.random()*10))">

Je zit hier echter niet met allemaal verschillende tafels, wel met een enkele tafel zoals je op die specifieke knop zou klikken als de tafel die je krijgt.
Een andere oplossing heb ik nog niet bedacht (beetje te weinig ervaring hé).
Alleszins nog eens heel erg bedankt dat je dat allemaal wilt doen voor ons noobs in javascript. :thumb:

Greetz : Jeren.

 

[Egel]

Hoi Jeroen, het kon nog iets korter.

function random(min,max) {
return Math.floor(Math.random() * (max - min + 1) + min);
};
Dat doet precies wat je er van verwacht
var dobbelsteen = random(1,6);


De 8 soorten sommen zijn verdeelt in 2x4:
a x b = c | c : b = a
daar zijn op 4 manieren een vraag van te maken:
? x b = c | a ? b = c | a x ? = c | a x b = ?
bij vaste tafels vervalt de derde optie, omdat b dan altijd hetzelfde is.


De array question wordt gebruikt om dubbele opgaven te voorkomen, de array wa (which answer) onthoudt of het vraagteken a, x, b of c is (one, sign, two of equals). Ik denk dat de functie voor het nakijken nog iets beter kan. *


obj.className = 'd';
obj.tabIndex = 0;
obj.readOnly = true;

obj.className = 'l';
obj.tabIndex = i + 1;
obj.readOnly = false;

bovenste zijn de donkere opgavevakjes, readonly
onderste de lichte invulvakjes, met tabindex

Om de vakjes van de som heen staat een <span id="s0" class="grey">, door daar de .className van te veranderen worden de kleuren van de alle vakjes in 1 som in 1x aangepast: grey, red, green, yellow, blue. De span zorgt ook voor de border. Geel blauw is voor kleurenblinden.

De opgaven worden in het formulier ook met een javascript geschreven, zo zijn ze makkelijk aan te passen.


* Twee leuke opgaven:
2 ? 1 = 2
2 ? 2 = 4


Veel broncode leesplezier! Egel.

 

[Egel]

In html:

 

[JeroenE]

Dank je wel, Egel, om het script zoveel te verbeteren.
Ik heb de laatste dagen meer javascript geleerd dan ik op de tutorial die ik momenteel volg. :thumb:
Ik zal het script voor mezelf eens goed ontleden, want dat is voor mij de beste manier om het te leren.
Hier zijn de links van de tutorial die ik volg :
basis
advanced.
Ik hoop dat het een goeie is, maar tot nu toe lukt alles wel. Ik ben gekomen aan de advanced lesson 3 review : de homework assignment.
En ja hoor, het is in het engels. Eigenlijk niet echt eenvoudig, maar ik vind het gewoon leuk.

Greetz : Jeren.

 

[JeroenE]

Hoi Egel,

Ik heb het script uitgepluisd en heb het net niet volledig begrepen. Uit het volgende zou ik graag wat uitleg.

obj.value = obj.value.replace(/\s/g,"");

Wat ik niet begrijp (lees: nog niet weet ), is wat die slash backslash s slash g doet.

Greetz : Jeren.

 

[Egel]

/\s/g is een regular expression, reguliere uitdrukking.

Ze staan standaard tussen // zoals strings tussen '' staan.
\s staat voor space (eigenlijk whitespace - ook tab)
g is een schakeloptie: global, anders wordt alleen de eerste spatie vervangen, zoals bij .replace(' ','')

.replace(/\s/g,'') vervangt alle spaties door lege strings, ofwel, wist ze.

.split(' ').join('') doet hetzelfde, maar regular expressions hebben meer mogelijkheden. Veeeeel meer!


var naam = 'JeroenE';
naam = naam.replace(/[aeiou]/g,'*');
assert(naam == 'J*r**nE');

[aeiou] verzameling, 1 van


var rExp = /^[1-9]\d{3}\s?[a-zA-Z]{2}$/;
var postcode = '1234 AB';
assert(rExp.test(postcode));

maakt gebruik van een patroon, een hele functie vervangen door 1 regel:

/
^ begint met
[1-9] 1 t/m 9
\d{3} cijfer (digit) 3x
\s? whitespace optioneel (0 of 1x), {0,1} kan ook
[a-zA-Z]{2} letters 2x
$ eindigt op
/


Regular expressions zijn als chinees: compact, in het begin onleesbaar, 1 streepje verkeerd en er staat iets compleet anders.

:
http://javascript-reference.info/
http://www.visibone.com/regular-expressions/

~/~

4 ? 2 = 2 ben ik nog vergeten.

De webmonkey javascriptlessen zien er goed uit. Als je de basisprincipes gehad hebt is het ook makkelijker om verdere informatie te vinden / herkennen.


Leuk is de beste leerschool! Grtz, Egel.

 

[JeroenE]

Dank je wel voor de uitleg.

4 ? 2 = 2 heb ik ondertussen bijgeplaatst.

if (f.one.value == 4 && obj.value == "-" && f.two.value == 2 && f.equals.value == 2) color = (nr ? "blue" : "green");

Greetz : Jeren.

 

[JeroenE]

De tafels staan online op mijn site. :thumb:
De polls trouwens ook al lang.
Dank je wel Egel.

Greetz : Jeren.