20 Exercicis JavaScript amb Autotest.¶

Descripció¶

Aquest fitxer HTML conté 20 exercicis de programació en JavaScript amb un sistema d'autotest integrat que permet als estudiants validar les seves solucions de manera automàtica.

Característiques¶

Sistema d'Autotest¶

✅ Validació automàtica: Cada exercici inclou 4 casos de test complets
📊 Seguiment de progrés: Barra de progrés visual que mostra l'avenç
🎨 Feedback visual: Colors diferents per a exercicis pendents, superats i fallits
📝 Resultats detallats: Mostra els valors esperats vs obtinguts en cada test
⚡ Execució immediata: Resultats instantanis en prémer "Executar Tests"
🔄 Test global: Botó per executar tots els tests de cop

Interfície¶

Editor de codi: Àrees editables (contenteditable) per escriure les solucions
Indicadors d'estat:
🟡 Pendent: Exercici no executat
🟢 Superat: Tots els tests han passat
🔴 Fallit: Un o més tests han fallat
Resum de resultats: Estadístiques en temps real (Superats/Fallits/Pendents)

Contingut dels Exercicis¶

Exercicis 1-5: Conceptes Bàsics¶

Suma de dos números: Funció bàsica d'addició
Número parell o imparell: Verificació de paritat
Màxim de dos números: Trobar el valor màxim
Factorial: Càlcul del factorial d'un número
Conversió Celsius a Fahrenheit: Conversió de temperatures

Exercicis 6-10: Manipulació de Strings i Arrays¶

Inversió de string: Invertir una cadena de text
Compta vocals: Comptar vocals en un string
És palíndrom: Verificar si és palíndrom
Suma d'array: Sumar elements d'un array
Troba el mínim: Trobar el valor mínim d'un array

Exercicis 11-15: Operacions Avançades amb Arrays¶

Filtra parells: Filtrar només números parells
Duplica valors: Multiplicar per 2 cada element
Capitalitza paraules: Primera lletra en majúscula
Elimina duplicats: Crear array sense duplicats
FizzBuzz: Implementació del clàssic FizzBuzz

Exercicis 16-20: Operacions Complexes¶

Compta ocurrències: Comptar aparicions d'un valor
Rang de números: Crear array de números consecutius
Aplana array: Convertir array multidimensional a unidimensional
Ordena per longitud: Ordenar strings per longitud
Objecte a parelles: Convertir objecte a array de [clau, valor]

Com Utilitzar¶

Pas 1: Obrir el Fitxer¶

Obre 20exercicis-autotest.html en un navegador web modern.

Pas 2: Escriure la Solució¶

Llegeix la descripció de l'exercici
Clica a l'àrea de codi (fons fosc)
Escriu la teva solució en JavaScript
Assegura't que el nom de la funció coincideix amb el demanat

Pas 3: Executar Tests¶

Per un exercici: Clica el botó "▶ Executar Tests" de l'exercici
Per tots: Clica "▶ Executar Tots els Tests" a dalt

Pas 4: Revisar Resultats¶

Verd (✓): Test superat correctament
Vermell (✗): Test fallit amb detalls de l'error
Revisa els valors esperats vs rebuts per depurar

Pas 5: Corregir i Tornar a Provar¶

Si hi ha errors: 1. Revisa el codi 2. Fes les correccions necessàries 3. Torna a executar els tests

Exemples de Solucions¶

Exercici 1: Suma¶

function suma(a, b) {
    return a + b;
}

Exercici 2: És Parell¶

function esParell(num) {
    return num % 2 === 0;
}

Exercici 6: Invertir String¶

function invertirString(str) {
    return str.split('').reverse().join('');
}

Exercici 14: Eliminar Duplicats¶

function eliminarDuplicats(arr) {
    return [...new Set(arr)];
}

Tecnologies Utilitzades¶

HTML5: Estructura de la pàgina
CSS3: Estils i animacions
JavaScript (Vanilla): Lògica de tests i validació
contenteditable: Editors de codi interactius
eval(): Execució dinàmica del codi de l'estudiant

⚠️ ADVERTÈNCIA DE SEGURETAT: Aquest sistema utilitza eval() per executar el codi dels estudiants, cosa que pot ser perillosa en entorns de producció. Aquesta eina està dissenyada exclusivament per a ús educatiu en entorns controlats. NO utilitzeu aquest sistema en aplicacions web públiques o amb codi no confiable.

Requisits del Navegador¶

Chrome/Edge 90+
Firefox 88+
Safari 14+
Opera 76+

Consells per als Estudiants¶

Llegeix atentament: Assegura't d'entendre què demana l'exercici
Prova amb exemples: Pensa en casos extrems (arrays buits, números negatius, etc.)
Utilitza console.log(): Depura el teu codi si cal
Aprèn dels errors: Els missatges d'error et diuen exactament què falla
No copiïs: Intenta resoldre els exercicis tu mateix primer

Avantatges del Sistema d'Autotest¶

Per als Estudiants¶

✅ Feedback immediat sense esperar el professor
✅ Poden practicar al seu ritme
✅ Veuen exactament què falla i per què
✅ Gamificació amb barra de progrés i estadístiques
✅ Poden repetir els exercicis tantes vegades com vulguin

Per als Professors¶

✅ Reducció del temps de correcció manual
✅ Els estudiants arriben més preparats
✅ Fàcil de compartir (un sol fitxer HTML)
✅ No requereix instal·lació ni servidor
✅ Pot ser utilitzat offline

Limitacions¶

⚠️ SEGURETAT: El codi s'executa amb eval(), que és perillós fora d'entorns educatius controlats
Aquest sistema NO està dissenyat per a ús en producció o amb codi no confiable
No detecta solucions ineficients, només si funcionen correctament
L'editor de codi és bàsic (sense syntax highlighting automàtic)
No guarda el progrés entre sessions

Possibles Millores Futures¶

Llicència¶

Aquest material forma part dels recursos educatius de Xavier Sastre.

Contacte¶

Per a preguntes o suggeriments sobre aquest material, contacta amb el professor.

Data de creació: Novembre 2025
Versió: 1.0
Autor: Sistema d'autotest per a exercicis de JavaScript