development of an educational platform for source-code...
TRANSCRIPT
Development of an educational platform
for source-code visualization and learning on
mobile devices
Desarrollo de una plataforma educativa para visualización de código fuente y aprendizaje en
dispositivos móviles
Autor: José Guillermo Ángel PinedaTutor: Dr. Ingeniero Juan Manuel Montero MartínezSupervisor: Dr. Ingeniero Kazunori SakamotoDepartamento: Ingeniería Electrónica de la Escuela Técnica Superior de Ingenieros de Telecomunica
Presidente: D. Ricardo de Córdoba HerraldeVocal: D. Juan Manuel MonteroSecretario: D. Fernando Fernández MartínezSuplente: D. Javier Ferreiros López
Fecha de lectura: XX Julio 2018
Miembros del tribunalProyecto fin de carrera
2
WillingQuizIntroducción
● Instituto Nacional de Informática de Japón, Tokio
● E-Learning, M-Learning
● 2 aspectos clave
● Niveles● Medallas● Puntos● Tablas de puntuaciones● Avatares● Personalización
Gamificación Lectura de código
● Formato código● Realzado de sintaxis● Información relevante
al código
3
WillingQuizDesarrollo (1/2)
● React-Native & Ruby on Rails
● Equipo de desarrollo
● Proceso de desarrollo: Git, Branches
4
WillingQuizDesarrollo (2/2)
5
WillingQuizEstructura (1/2)
● Cursos (Inglés, BEXA, LEC, Informática, IT)
● Conjuntos de preguntas (Quiz set)
● Preguntas (Leitner)
6
WillingQuizEstructura (2/2)
● Leitner
7
WillingQuizMCII
● WOOP/MCII (Mental contrasting with implementation intentions)
Deseo (Wish) Resultado (Outcome)
Obstáculo (Obstacle) Plan (Plan)
8
WillingQuizVisualización de código
● Visualización de código
● Realzado de sintaxis– React-syntax-highlighter
● Formato (adaptarse a la pantalla del dispositivo)
– Prettier
9
WillingQuizVisualización de código (1/18), Pantalla principal
Código relevante Saltar pregunta
Botones de respuesta
Pregunta Alternar info/respuestas
10
WillingQuizVisualización de código (2/18), Pantalla principal
Código relevante Saltar pregunta
Botones de información
Pregunta Alternar info/respuestas
11
WillingQuizVisualización de código (3/18), Ventana de información
12
WillingQuizVisualización de código (4/18), Ventana de información
13
WillingQuizVisualización de código (5/18), Ventana de información
14
WillingQuizVisualización de código (6/18), Respuesta correcta
15
WillingQuizVisualización de código (7/18), Respuesta incorrecta
16
WillingQuizVisualización de código (8/18), Explicación de la respuesta
17
WillingQuizVisualización de código (9/18), Resumen
18
WillingQuizVisualización de código (10/18), Medallas
19
WillingQuizVisualización de código (11/18), Formato
20
WillingQuizVisualización de código (12/18), Formato
21
WillingQuizVisualización de código (13/18), Formato
22
WillingQuizVisualización de código (14/18), Formato
23
WillingQuizVisualización de código (15/18), Formato
24
WillingQuizVisualización de código (16/18), Formato
25
WillingQuizVisualización de código (18/18), Código
26