School of Computer Science and Software Engineering

CITS3403 Agile Web Development — Projects

Unit Coordinator

Dr Tim French

Phone: 64882794

Lab Facilitator

Mr Tom Smoker, Mr Haolin Wu

 

Consultation Time

Where: CSSE rm 2.14
Time: Wednesday 12-2pm
No appointment needed.

 

Project FAQs

Can I use jQuery, React, Bootstrap, or Angular for UIs in Project Part 1

JQuery, AJAX and bootstrap are ok, but Angular, VUE.js, React etc are not. We would like to see a demonstrated confidence in using raw HTML for structure, CSS for formatting and JavaScript for interactions in Part 1. Having said that, you are encouraged to learn these UI libraries and front-end frameworks in your spare time.

Can I use advanced CSS3 that are not necessarily supported by certain browsers

Yes in this case, but you will need to clearly state the browsers that supported and ensure that your page is still functioning on the browsers installed on the CSSE/EECE lab machines. So the bottom line is, if the pages work on the browsers in the labs, then it would be considered as acceptable.

What Flask modules can I use

Typically the flask modules mentioned in lectures will be ok. Otherwise, post a question to the help forum. The basic ones to use are: Flask, Flask-Babel, Flask-Bootstrap, Flask-HTTPAuth, Flask-Login, Flask-Migrate, Flask-SQLAlchemy, Flask-WTF, Jinja2, PyJWT, requests, Werkzeug.

Can I do cross-unit registration

The answer is No in general. If there are special circumstances, please email Tim for permission.

News:

  • [14 Feb 2020] This unit currently has 190 CITS3403 students and 40 CITS5505 students enrolled. Almost twice as many as last year!
  • [14 Feb 2020] Labs, lectures and workshops all start in week 1.
  • [24 Feb 2020] Update: Labs will be starting in week 2.
  • [24 Feb 2020] Welcome to the first day of semester. The first class will be the lecture on Wednesday at 2.

Project 1: HTML, CSS & JavaScript Website

Due 6pm, April 20, 2020

This project is worth 20% of your final grade and must be done individually. It is now for all students, both CITS5505 and CITS3403, as a midsemester test is no longer viable.

The project description, instructions and marking scheme is available here.

Web Project Specification: Online Quiz Platform

Due 6pm, May 25, 2020

This project is worth 30% of your final grade in the unit must be done in groups of two to four for CITS3403 students. For CITS5505 students, it should be done in pairs.

Marking Criterion now available

Project Description

For this project you are required to build a multi-user quiz/questionaire/survey application. The application should be written using HTML, CSS, Flask, AJAX, JQuery, and Bootstrap. The application should allow administrators to set question sets, users to submit answers to the questions, and manual or automatic assessment of those answers. The context of the questions and the type of assessment mechanism is up to you.

Example contexts you could use are:

  • Educational assessment, like w3schools.
  • Population surveys, for example to find politcal views or voting intention. (Assessment here could be showing someone where their views sit in the general population).
  • Research questionaires, where personal history or otehr data could be provided.
  • Competitive or esteem based tests, like general knowledge quizes or IQ tests

The types of assessment mechanism you could use are

  • Multi-choice scoring
  • Short text answers with fuzzy matching
  • Manual assessment of long text answers
  • Others (logical criterion, community voting, or compiling and executing submitted code)

Think carefully about the design of the application. It should be:

  • Useful, in that it answers an interesting question in a meaningful way
  • Reliable, so that it is not frustrating to use
  • Intuitive, so that it is easy for a user to complete the assessment and recieve feedback
  • Engaging, so that it looks good and presents sufficient context for the questions being asked.
  • The web application should be styled to be interesting and engaging for a user in the selected context. It should offer several views including:

    1. An adminstrator view, that can add delete question sets, assess responses, and add and delete users.
    2. A user view that can view questionsets, submit answers, and see the results of completed question sets.
    3. A general view that can just view aggregate results for quizzes.

    In addition to the web application, you should create a private GitHub project that includes a readme describing

    1. the purpose of the web application, explaining both the context and the assessment mechanism used.
    2. the architecture of the web application
    3. describe how to launch the web application.
    4. describe some unit tests for the web application, and how to run them.
    5. Include commit logs, showing contributions and review from both contributing students

    Group Registration is now available

    Getting Started: Select Website Purpose and Style

    Find a partner(s) with (ideally with common interests) and come up with a theme for your application. Discuss styling, how the application is likely to be used, and precisely what functaionality it should offer. Criteria: Front-end (50%)

    1. The user should be able to enter all necessary data required by the application (although this need not be stored). This data should be sufficient to run the algorithm, and validatedon the client side.
    2. The webpage must be implemented using HTML5, CSS and Javascript (or a subset thereof).
    3. All resources used (inlcuding pictures, javascript libraries, css) must be full referenced.
    4. The website must use HTML5, and CSS. The HTML and CSS must pass this validator.
    5. The website must work on chrome, firefox and internet explorer
    6. The website should have at least six pages/sections: one promoting the theme (and explaining how the quiz works) to users; one displaying available question sets to users; one allowing answers to be submitted from users; one displaying results of assessments to users; one allowing admins to add remove question sets/users; and one allow admins to assess responses.
    7. There must be a consistent style (via css file) for all pages yet each page should be easily identifiable. There should be a navigation element, and a footer element displaying author information.
    Marking Scheme
    • HTML5 - style, maintainability, validation 10%
    • CSS -style, maintainability 10%
    • Javascript-code quality, validation of user generated data, execution 15%
    • Style - look and feel, usability 10%
    • Content - coherence, effectiveness 5%
Criteria: Backend functionality (50%)

The second part of the project criteria is the back end functionality of web application.

The web application should be implmented using Flask (any additional libraries/modules require unit coordinator approval), and provide at least the following functionality:

  1. A user account and login feature, (as a minimum for administrators)
  2. The ability to propose new question sets and add users.
  3. A method to submit answers.
  4. A method to assess submissions.
  5. A method to see assessments.

There is a possibility for a wide variation in the degree of ambition and complexity in the project, and this will be reflected in the marking criteria. For example, a quiz that assessors basic arithmetic skills using multi-choice questions and automatic grading would probably achieve a maximum score of 75%, whilst an application that allows manual assessment and provides feedback to users could achieve a lot more.

The back functionality will be assessed via the following deliverables:

  1. A complete Flask application providing the functionality of the project. This should be submitted as a zip including
    • a full readme.md, describing the design and development of the application, and giving instructions on how to launch from local host.
    • the git log, showing commits from both partners
    • all source code, with comments and attributions for any external libraries.
    • a requirements.txt file, listing all packages used. To build the requirements.txt file for your virtual environment, use the command: pip freeze > requirements.txt while your virtual environment is active.
  • The application should include an HTML5 website with the following pages (or functions):
    • An adminstrator view, that can add and delete question sets, assess responses, and add and delete users.
    • A user view that can view question sets, and submit answers and see assessments/feedback.
  • Marking Scheme
    • Codecode quality, complexity of task, execution 10%
    • Persistence and User authentication Database schema and models10%
    • Testing Unit tests and Selenium Tests10%
    • Design Purpose and level of complexity10%
    • Collaboration Git logs and agile processes 10%

    The Marking Criterion is now available.

    Demonstration Schedule

    In week 12 all members of each team must present and demonstrate their project. A schedule will be set up for demonstrations by week 8. All team members must demonstrate their code via Zoom, and meeting invitations will be arranged.

    Submission

    Submit the zip including:
    1. All source code for a flask application
    2. a full readme.md, describing the design and development of the application, and giving instructions to launch the applictaion (running on localhost), and dependencies (i.e. required modules)
    3. the requirements.txt file, containing all modules used by your project
    4. the git log, showing commits from both partners
    5. a small database file (eg app.db) to demonstrate the projects functionality
    Do not include all libraries (i.e. the virtual environment folder), or the full git repository as they are large and unnecessary.
    cssubmit


    This Page

    Last Edited on:
    Wednesday 29th of April 2020 10:57:25 AM

    Website Feedback:
    [email protected]