Education Web-app

This project was created as an assignment for the video and digital television course in which we had to solve the problem of teaching and learning in three levels: Methodological, Functional and conceptual.

This project was created as an assignment for the course of video and digital television, in which we had to solve the problem of teaching and learning in these three levels: Methodological, Functional and conceptual.
We decided to solve this problem using a web platform, in which students and teachers of the course can log in. The students can also access the teaching videos covering topics such as codecs and video formats, after they have learnt the conceptual part of the topic they can proceed to do an evaluation. The evaluation consists of three activities; each activity is going to have a sort of videos teaching topics related to codecs and video formats and at the same time each activity has a different purpose, so with this platform we can achieve the teaching and evaluation of the methodological, functional and conceptual part. To achieve all of this, we used Angular 4 and Firebase, using libraries such as AngularFire5 and dragula. For the videos we used the web-app "PowToon".

For this instructable you will need:

• NodeJs
• Angular4
• Firebase Project
• A computer

• Install nodejs 8.9.1 with NPM (Node Package Manager) https://nodejs.org/es/
• Install Angular-CLI (Command Line Interface) typing at the console "npm install -g @angular/cli"

• Create a project using "ng new my-app"
• Install node packages with "npm install"
• Install dragula with "npm install dragula --save"
• Install AngularFire2 with "npm install firebase angularfire2 --save"

For this you can check the images of this step

• Create a google account
• Click on "Go to console"
• create a project
• Go to general and grab the client keys

For this you can check the images of this step

Create the components for the app.

Using "ng g c "component name" " for each of the following components:

• Course Page
• Topics Page
• Video Page
• Evaluation Page
• Methodological Page
• Conceptual Page
• Functional Page
• Comments component
• Admin

• Create the html and the ts

In the ts you will write the logic behind the autentication, if the user is an student or an Admin, and you will write a table with the course information from the student. For that you can use an authentication service and a database service both provided at the end of this instructable.

For this you can check the images of this step

In this component you will write the html and ts.

Similar to the course page except you dont have to check if the user is an admin or student, you will only have to write authentication and provide with the lists of topics in the course.

For this you can check the images of this step

In this component you will write the html and ts.

For this component you will provide the link from powToon in order to play the video, and the comment component

For this you can check the images of this step

for this ocmponent you will use the same video component with a diferent video in wich you will explain the evaluation process.

Then just have a button that links to the conceptual page

For this you can check the images of this step

In this page you will create both html and ts.

• Create two video components with a button
• Create an array of two videos with a boolean "isCorrect"
• Write a CheckScore() function
• Upload the score to the database
• Transport to the next page

For this you can check the images of this step

In this page you will create both html and ts.

• You will make use of dragula, for that read the docs of dragula https://github.com/bevacqua/dragula
• Create array of videos
• Create the order of videos
• write a Check Score
• Upload Score
• Go to next page

For this you can check the images of this step

In this page you will create both html and ts.

• Same as the conceptual page you will have buttons and videos as options.
• In the html write a problem for the user to solve
• Then place the videos in an array with a boolean "IsCorrect"
• Upload the score to the database

• Create the html and ts
• Place in the html the image
• Write the form in the html
• Submit the form in the ts to the auth service
• Save the user in the database

In case you had problems, here is the rar with the components and services