Test de les capitals europees

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

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:

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);

Una altra possibilitat és fer-ho amb objectes.

Shuffle (barrejar) un array (i assegurar-se de no repetir els valors)

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();
}

Si es vol implementar el mètode shuffle(), s'ha de fer amb prototype:

Solució parcial

<!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>

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:

<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>

Solució

Pots mirar-te aquesta solució que ha fet un alumne:

o bé aquesta solució que és més completa i més xula:


creat per Joan Quintana Compte, gener 2018

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines