Wapp

From mn/ifi/inf5750
Jump to: navigation, search

Introduction

We are going to make a quiz app. The course writer will be able create a quiz for the course takers.

Group Members

Repository

Development

Time schedule

Milestones are preliminary and subject to change.

Milestone 1 – 01.11.2014

  • Document features and architecture on Wiki
  • Show understanding of DHIS2 web apps

Milestone 2: 20.11.2014

  • The outline of the three partial htmls have been made

Milestone 3: 29.11.2014

  • First version finished. The app supports:
    • Server communication, which is:
      • Storing a quiz
      • Deleting
      • Get all quizzes
    • The making of a quiz 
    • Dynamic list of quizzes 
    • Searching among all quizzes 
    • Take a quiz (requires minor changes to work 100%)
  • Future additions may come

Everything is made with Angular

Planned delivery: 3.12.2014

  • Second version finished. App uploaded to DHIS2 Web apps page. 

Presentation: 3.12.2014

Distribution of work

  • Ole Kristian
    • Client-server communication
    • The dynamic list of quizzes
  • Joakim
    • Creating the quiz
    • General styling
    • Scoreboard
  • Aleksander
    • Submitting the quiz and generating a score

Architecture

  • HTML and CSS
  • Bootstrap
  • Javascript built on existing libraries
  • DHIS2 Web API
  • Angular
    • Built-in directives
    • Http and q

Summary of requirements

The app is divided in three partials and one index html using Angular ng-view. 

  1. index.html
    • Defines the angular app and loads all the necessary files.
    • Controller: MainController
  2. course.html.
    • This page shows all the made quizzes and supports searching for quizzes as well as deleting a taking a quiz
    • Controller: ResourceController
  3. createQuiz.html
    • Supports the making of a quiz. Is dynamic in regards to adding questions and alternatives
    • Controller: CreateQuizController
  4. quizForm.html
    • Displays a quiz and have checkboxes for each alternative for the user to answer. Will generate total score and storing and maybe a highscore table
    • Controller: ScoreController
  5. scoreBoard.html (not finished)
    • Displays a scoreboards for all the quizzes that are currently on the server
    • Controller: ResourceController

Documented learning during project

Steep lurning curve for everyone. We have little to no experience with Angular, JavaScript, HTML and CSS except from things we learned in the earlier assignments.

We know how to use the basics of Angular in regards to its built-in directives, how to structure an Angular app and do server communication. The server communication also uses the services q and http. We have also gained experience with HTML, JavaScript and CSS. We are now able to basic web-apps.

Suggested improvements to APIs etc

The API should support storing JSON objects. It would have made the coding a lot easier!

Screenshots

The mainpage of the app. Shows the quizzes and has a dynamic search bar on top
Page for creating a quiz
Page submitting a quiz
(Not finished) Page that shows the scoreboard for each quiz
How the scoreboard page looks on a smaller screen/smartphone