CS39440 Major Project - Quiz Tool

Build status:

Outline Project Specification

The draft of the outline project specification is available here.

Final Project Report

The final report is available here.

Production environment

The production environment can be accessed here.

Timesheet

Google sheets timesheet

Running the app locally

Prerequisites

You should have the following installed on your machine.

• Docker
• docker-compose

You should also make sure there is a .env file in the root of the project with the following environment variables set for Google Single Sign on purposes.

GOOGLE_CLIENT_ID=<GOOGLE_CLIENT_ID>
GOOGLE_CLIENT_SECRET=<GOOGLE_CLIENT_SECRET>
GOOGLE_CALLBACK_URL=<GOOGLE_CALLBACK_URL>

Integrating Google Sign-In (valid as of 29/06/2018)

1. Go to https://console.developers.google.com/apis/dashboard and create a new project
2. Go to https://developers.google.com/identity/sign-in/web/sign-in and click the CONFIGURE A PROJECT button
3. Select the previously created project and hit NEXT
4. Select the Web browser from the drop down list
5. Type in http://localhost and click CREATE
6. Replace <GOOGLE_CLIENT_ID> and <GOOGLE_CLIENT_SECRET> in your .env file with the ones generated by Google
7. Go back to https://console.developers.google.com/apis/dashboard and select Credentials from the side bar
8. Select the relevant OAuth client, add http://localhost/express/auth/google/callback to the Authorised redirect URIs and hit Save
9. Replace <GOOGLE_CALLBACK_URL> in the .env file with http://localhost/express/auth/google/callback
10. Finally, go to https://console.developers.google.com/apis/api/plus.googleapis.com/ and enable the Google+ API for your project

Running the app and the tests

To run the app locally using docker-compose:

$ chmod +x restart.sh
$ ./restart.sh

You can view the application running by going to http://localhost in your web browser.

To run front-end unit tests, back-end unit tests and integration tests locally:

$ chmod +x testRestart.sh
$ ./testRestart.sh

Structure of the application

• .circleci/ contains the Circle CI build definition
• .elasticbeanstalk/ contains the Multicontainer AWS Elasticbeanstalk config file
• client/ contains the definition of the client Docker container, composed of an Angular front end, and an nginx reverse proxy
• docs/ contains the documents produced during the development of the final project
• scripts/ contains the production deployment script
• server/ contains the definition of the server_node Docker container, composed of the back end of the application written in Express.js
• tester/ contains the definition of the tester Docker container, used for running Selenium tests during integration tests
• .env file (not checked into the GitHub repository), contains the environment variables necessary for Google Single Sign On integration
• .gitignore file specifies which files should not be commited to the git repository
• docker-compose.integration.yml file defines the containers interactions during integration testing
• docker-compose.test.yml file defines the containers interactions during server side unit tests
• docker-compose.yml file deifnes the containers interactions when the Quiz Tool is run locally
• Dockerrun.aws.json file defines the containers interactions when the Quiz Tool runs in production on AWS
• restart.sh is a bash script used for running the application locally
• testRestart.sh is a bash script used for running all tests of the application

Project Description

Student engagement and live knowledge monitoring are vital in the provision of good quality lecture content in 2018. It is important to make sure audience understands concepts presented, and quizzes can help lecturers judge students' understanding in real time.

Aberystwyth University currently uses Qwizdom live polling tool during the provision of some lectures and practical sessions. The university operates under a single license forcing lecturers to book sessions before they can use the tool. Due to human nature, session hijacking occasionally occurs to the bemusement of both students and lecturers. For example, students could be shown biology slides half way through their geography lecture.

This project will focus on the design and development of an in-house built Quiz Tool, enabling multiple lecturers to use it at the same time and potentially making Qwizdom redundant in the future. This ambition can only be achieved if the project is of high quality and its future maintainability is considered at all stages of the design and development.

The Quiz Tool allows lecturers to login with their Google credentials, upload their PDF lecture slides and create Lectures in the system. Each Lecture can be then edited and eligible slides can become quizes. An example of a quiz would be an "ABC style" question where a student can select one of the options and submit their answer. Once a lecturer is happy with their Lecture, he can broadcast it and receive a session key which can be shared with students. Lecture slides will be shown to all students and the lecture can be delivered in a traditional fashion up to the moment a slide has been marked as a quiz. Students will then be able to answer the question and polling results will be presented in real time to the lecturer. It is also possible to export the quiz answers as a PDF report for future analysis, by accessing sessions history page of each lecture.

The tool is composed of the back-end with an associated database, and two front-ends. One for lecturers and one for students. Finally, the tool will be developed using an agile methodology, adjusted for a single person project.

Design

Server side

• Node.js Express web development framework will be used on the back end to handle clients' interactions.
• MongoDB JSON storage database will be used for data persistance.
• Socket.io will be used to push lecture slides to students.

Users

There will be 2 types of users:

• Lecturers
• Students

Client side

• Angular 4 will be used to create a web client for both lecturers and students. It should allow the lecturer to authenticate with the app and create lecture sessions and broadcast them later on. Students can then join the session using the session key provided by a lecturer and view lecture slides on their machines.

Build

• CircleCI will be used to continuosly checkout, build, test and deploy the system. Build definition is straightforward to follow and can be found in the .circleci/config.yml file. When a master branch is built, the extra deployment step is run and you can find out more about it below.

Deployment

The build agent will only deploy the Quiz Tool to production when the master branch is built. The scripts/deploy.sh bash script will run, which consists of two main steps:

• Both client and server Docker containers are tagged for Amazon Elastic Container Registry purposes, and then pushed to ECR.
• The eb-cli Elastic Beanstalk Command Line Interface is used to deploy the app to a Multicontainer Docker Environment. Elastic Beanstalk pulls the client and the server Docker images from ECR and creates a cluster running in production. You can find out more by reading the Dockerrun.aws.json file.

Environments

There are 3 environments:

• Development: the app running on developer's laptop using docker-compose
• Testing: the app running tests either on developer's laptop or the build engine provisioned by CircleCI.
• Production: the app running in the Elastic Beanstalk Multicontainer Docker Environment.

Each environment should have its own database.

Docker & docker-compose

Both client and server apps are containerised using Docker. There is also the third mongo db container pulled straight from the Dockerhub. The client container consists of the angular 4 front-end, and an nginx reverse proxy and you can find out more by reading the client/Dockerfile file. The server on the other hand consists of a Node.js application with Express.js installed. You can find out more by reading the server/Dockerfile file.

Docker-compose is used to orchestrate these containers for development and testing purposes. The network is defined in the docker-compose.yml file, and a visual representation is available in the docs/design/app_structure.jpg file.

Development

• Code will be stored on GitHub
• ZenHub will be used as a Kanban board to manage work items and to monitor progress
• Work could be split into multiple iterations
• Code will need to be tested
• New features will be added using a feature-branch working model
• Each issue will have a corresponding feature-branch
• Once the feature is complete, the feature-branch has to be merged into the master branch by opening a pull request
• Direct push to master will be forbidden
• Each pull request will trigger a CircleCI build agent which will run all tests before allowing the code to be merged

Business Logic

Low fidelity prototypes are available in files docs/design/story_board_lecturer.jpg and docs/design/story_board_client.jpg.

LICENSE

The source code is licensed under GPLv2, due to the PDFtk dependency licensed under GPLv2.