Joan: /* Solució */

2020-01-09T18:13:35Z

Solució

Pàgina nova

=APLICATIU TEST de CAPITALS=
(El primer i tercer exercici van sortir en un examen de la UF3). No pas l'exercici 3.

'''1.''' Fitxer '''capitals.html'''. En una pàgina web es demana per la capital de ''França''. Has de crear una llista desplegable amb vuit opcions que són capitals europees, de les quals només una és correcta (''Paris''). En clicar sobre la llista desplegable has de controlar mitjançant Javascript si la resposta és correcta. Amb Javascript faràs la capa de presentació, de manera que si la resposta és correcta quedarà ressaltada amb fons verd, un color de text adequat i un label de 'OK' a la dreta. Si la resposta és incorrecta quedarà amb fons vermell, un color de text adequat i un label de 'ERROR' a la dreta.

'''NOTA''': la capa de presentació de resultats (OK/ERROR) que es proposa és una de diferents possibilitats. L'alumne escollirà la manera de presentar la informació del formulari, de manera que sigui es més ''usable'' i ben dissenyat possible. Hem de pensar en la ''usabilitat'' i ''experiència d'usuari''.

'''2.''' Basant-nos en l'exercici anterior, dissenya i programa un '''test''' per saber si coneixes les capitals europees. Crea una matriu de països i capitals on es guardaran les respostes. De forma aleatòria s'escollirà un país i unes capitals (entre les quals hi haurà el valor correcte). Un cop has respost una pregunta, s'ha de veure el resultat (OK o ERROR), i al cap d'1-3 segons tornar a generar una altra pregunta. En un comptador has de veure el resultat del test (preguntes correctes / preguntes totals). Quan dissenyis aquest aplicatiu pensa a fer-lo el més general possible, de manera que sigui fàcil adaptar-lo a un altre cas. Per exemple, en comptes de capitals europees, preguntar sobre vocabulari d'anglès, examen psicotècnic, etc.

De fet, no cal que l'exercici es faci sobre capitals europees. Pots proposar un altre examen tipus test (consultar amb el professor).

'''3.''' Abans de penjar l'exercici al Classroom, el professor certificarà el bon funcionament (obligatori).

'''4.''' Exercici de DOM: Basant-nos en el primer exercici, recórrer el DOM de la llista desplegable i crear amb Javascript i de forma dinàmica una taula amb els valors de la select box. Ressaltar de forma alterna les files, triant dos colors.

Entregar aquest exercici al '''Classroom''' dins del termini establert.
=Notes=
Per crear la relació de països i capitals ho pots fer amb una matriu de dues dimensions:
<pre>
var paisos = [['França','Paris'], ['Anglaterra','Londres'], ['Itàlia','Roma']];

console.log('La capital de ' + paisos[0][0] + ' és ' + paisos[0][1]);
console.log('La capital de ' + paisos[1][0] + ' és ' + paisos[1][1]);
console.log('Número de països' + paisos.length);
</pre>
Una altra possibilitat és fer-ho amb objectes.

==Shuffle (barrejar) un array (i assegurar-se de no repetir els valors)==
<pre>
function shuffle(a) {
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}

var paisos = [['França','Paris'], ['Anglaterra','Londres'], ['Itàlia','Roma'], ['Romania','Bucarest'], ['Irlanda','Dublin'], ['Bèlgica','Brussel.les'], ['Portugal','Lisboa']];

shuffle(paisos);

for (var i=0; i<paisos.length; i++) {
console.log(paisos[i][0] + ': ' + paisos[i][1]);
}

//una altra manera de fer. shift() és el mateix que pop() però elimina el primer element de la matriu (en comptes de l'últim)
console.log (paisos.length);
while (paisos.length > 0) {
console.log(paisos[0][0] + ': ' + paisos[0][1]);
paisos.shift();
}

</pre>
Si es vol implementar el mètode ''shuffle()'', s'ha de fer amb prototype:
*https://www.kirupa.com/html5/shuffling_array_js.htm

=Solució parcial=
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
</head>
<body>
<h2>Quina és la capital de França?</h2>
<form id="frm1" action="" method="get">
<select id="selector">
<option value="0">Madrid</option>
<option value="1">París</option>
<option value="2">Berlín</option>
<option value="3">Roma</option>
<option value="4">Atenes</option>
<option value="5">Brusel·les</option>
<option value="6">Viena</option>
<option value="7">Helsinki</option>
</select>
<label></label>
</form>
<script>
var select = document.getElementById('selector');
select.addEventListener("click", es_correcte);

function es_correcte(){
var valor = document.getElementById('selector').selectedIndex;
console.log(valor);
var o = document.getElementById('selector');
var label = document.getElementsByTagName('label');
if(valor=="1"){
o.style.backgroundColor = "green";
label[0].innerHTML = "OK";
}else{
o.style.backgroundColor = "red";
label[0].innerHTML = "ERROR";
}
}
</script>
</body>
</html>
</pre>
=Dropbox multilinia i multiselect=
En el cas de què vulguis fer un test amb múltiples respostes, has de modificar el codi per tal de tenir una llista desplegable que sigui multiselect. Estudia i prova el següent codi:
<pre>
<html>
<head>
<title>Multiselect example</title>
<script>
//from multi-select.html
function showChoices(){
//retrieve data
var selLanguage = document.getElementById("selLanguage");
//set up output string
var result = "<h2>Your Languages</h2>";
result += '<ul>';
//step through options
for (i = 0; i < selLanguage.length; i++){
//examine current option
currentOption = selLanguage[i];
//print it if it has been selected
if (currentOption.selected == true){
result += " <li>" + currentOption.value + "</li>\n";
} // end if
} // end for loop
//finish off the list and print it out
result += "</ul>\n";
output = document.getElementById("output");
output.innerHTML = result;
} // end showChoices
</script>
</head>
<body>
<h1>Multiple Selections</h1>
<form action>
<fieldset>
<label>
Select the language(s) you know.
(ctrl-click to select multiple lines)
</label>
<select id = 'selLanguage' multiple = 'multiple' size = '10'>
<option value = 'HTML'>HTML</option>
<option value = 'CSS'>CSS</option>
<option value = 'JavaScript'>JavaScript</option>
<option value = 'PHP'>PHP</option>
<option value = 'MySQL'>MySQL</option>
<option value = 'Java'>Java</option>
<option value = 'VB.NET'>VB.NET</option>
<option value = 'Python'>Python</option>
<option value = 'Flash'>Flash</option>
<option value = 'Perl'>perl</option>
</select>
<button type = 'button' onclick = 'showChoices()'>Submit </button>
</fieldset>
</form>
<div id = 'output'>
</div>
</body>
</html>
</pre>
=Solució=
Pots mirar-te aquesta solució que ha fet un alumne:
*[[Fitxer:Capitals.zip]]
o bé aquesta solució que és més completa i més xula:
*[[Fitxer:Capitals solucio alumne.zip]]

{{Autor}}, gener 2020

Test de les capitals europees - Historial de revisió

Joan: /* Solució */