Development of an educational platform for source-code...

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