Lab1 - Prototype

Normal Deadline: Monday, 23 January 2017, 4.00pm

2017 Lab, Background Story

You are a potential employee of a software company called UWishWCode. You currently undergo a technical interview (this Lab1) with the company, about a simple web programming task. Upon successful completion of this interview, the company may1 give you the job and you will get more challenging web programming tasks.

Your client is a local Singapore University lecturer who advocates the usage of gamification in education. This lecturer likes competition a lot and wants to push his students in his certain module to do their best week-in week-out throughout this semester2. He believes that a public ranklist where he purposely exposes his students' live grades will motivate his students to do their best.

Your client show you a few screen shots of his old designs (he only showed those who got A- or above in these screen shots3):

Jan-Apr 2014

Jan-Apr 2015

Jan-Apr 2016


Your client also shown his final assessment paper on the same matter, see Q1 and Q2 of 1415SEM2-CP3101B.pdf.

Basic technical requirements:

Let's start by giving your client a working prototype by Monday, 23 January 2017, during your first face-to-face Lab1 or latest by the end of Lecture05 (Tuesday, 24 January 2017). Here are the technical specifications of the prototype:

  • The HTML files in the web application have to be written in HTML5 standard.
  • Write at least 5 HTML files where:
    1. One of the html file should be called 'index.html' that contains a table of student ranks, flags, names, detailed scores (see below), etc, i.e. make yours as close as possible as this live version.
      Let n be the number of students.
      In this prototype, set n ≥ 7 entries so that the table does not look too empty.
      For now, if you do not know JavaScript yet, you can let the table content be static.
    2. One other html file should be called 'help.html' that describes the actual scoring scheme, a copy paste from this live version is fine.
      There must be a link from 'index.html' to this file and vice versa.
    3. Three other html files that describe the details of student scores, e.g. example student 1, example student 2, example student 3.
      Writing the other n-3 html files is optional (you can do so for 'completeness' but it will be tedious if you do not use server-side PHP scripts with database access).
      Each of these detail files should be linked to 'index.html' and vice versa.
  • To avoid 'sensitive issues'... the student data: flags, photos, names, and scores of the n students that you use in the prototype should be fictional, you canNOT use the raw data at this live version as you are not the actual client.
  • The following 20 HTML5 elements have to be used in your prototype (you can use any other additional HTML5 elements): <html>, <head>, <meta>, <title>, <link>, <body>, <div>, <img>, <a>, <h1/2/3> (3 categories), <ol>, <table>, <thead>, <tbody>, <footer>, <tr>, <th>, <td>.
  • You cannot use inline CSS3 at all. All styling has to be done via a single external CSS3 file linked from those 5+ HTML pages.

At this stage, your web application is still just a static (read-only) one and you do not even need a web server to test this application. Just open 'index.html' in your favorite web browser (we recommend Google Chrome though) and you can 'use' the static application straightaway. However, this version will not be user friendly for your client nor his students as this is only a local copy (his students cannot view it online) and every single update entails modification of the (various) HTML files which may cause inconsistencies... We will continually improve this web application in the next few weeks.

The Extra Challenges for Lab1

  1. HTML5 elements challenge:
    You need to show your lab TAs that you have logically (not randomly) use at least 30 different HTML5 elements in Lab1, that is, 10 more on top of the compulsory 20 HTML elements mentioned in the basic technical requirements. Write a comment in your HTML file listing down those different elements that you manage to use.
  2. CSS3 look-and-feel challenge:
    Improve the look-and-feel of your prototype. Use nicer fonts that are more suitable for University students? Try exploring Google fonts, is the current white background (like NUS IVLE good enough or you can design a better one?), use CSS3 transformation/transition to give simple dynamic effect to your otherwise static ranklist, use favicon? Bottom line: Make your prototype as good looking as possible.
  3. JavaScript self-learn challenge:
    Instead of stopping at static page in this prototype, you may want to provide extra interactivity, like ability to sort by column like the one asked in Q1 of 1415SEM2-CP3101B.pdf. For this, you may want to read JavaScript lecture note ahead of time. This challenge will be repeated in Lab2 as one of the basic technical requirements.

FAQ

  1. Q: For the extra challenges, do I need to try do all sub-parts?
    A: The extra challenges are for you to broaden your web programming skills, so the sky is your limit. Once your Lab TA feels that you have done enough, he/she will declare that you have passed the challenge (subjective).
  2. Q: For the extra look-and-feel challenge, I actually already know Bootstrap (or other tool), can I use it?
    A: Up to you. Have you taken CS3240 or did some kind of web programming task before? Orbital perhaps?
  3. Q: Actually I already have access to an existing web server before..., can I use it now to host my Lab1 live instead of waiting until Lab2?
    A: Is it our own sunfire? (if yes, go ahead, but that one has no server-side scripting or database access capability). But if you already have access to a some other full fledged web server, does that mean that you have built some web application before? Please check if CS3226 is for you...
  4. Q: Actually I already know Laravel and can write a web application similar to this live version... Should I do that?
    A: Truthfully, if you can already reach that level at this stage (Week02-03), consider dropping this module by the end of Week02 as it will not be that useful anymore for you...
  5. Q: As Monday, 30 January 2017 is a public holiday, how should we do the next Lab2? Why don't you just cancel that one?
    A: During the first face-to-face meeting with your Lab TA on Week 03 (Monday, 23 January 2017), your Lab TA will pair two/triple three of you at random and then elaborate the simple technical requirements needed in the online Lab2, which is basically to publish the (improved version of your) Lab1 'online'. You will then work online in a pair/triple and we will only check your submission after the extended deadline of Lab2 (Tuesday, 31 January 2017 instead of Monday, 30 January 2017). Steven decides not to cancel this lab as otherwise there will be a super huge jump between Lab1 → Lab3...

General style of Steven's CS3226 Labs (2017)

  1. Lab requirements will be released approximately by Tuesday noon after Tuesday lecture of the week before the corresponding Monday lab session.
  2. Students are expected to try out at least the basic requirements before attending the following Monday lab session.
  3. Self-learning is super important in this field of web programming as the technology stack will keep evolving rapidly, much faster than what we (teaching staffs) can teach you in 1h30m per session.
  4. During the face to face meeting with Lab TA, each student (Lab1) or each pair/triple (Lab2-4) or project group (Lab 5-6) has to first check if they have met the basic requirements for that week.
    1. If yes, proceed with the extra challenges that have been selected to be more challenging, the sky is the limit.
    2. If not yet and you/the pair of you are struggling, work with the Lab TA to reach the basic requirements within the 1h30m face-to-face time (the Lab TAs should be able to clear those basic requirements themselves in under 30 minutes).
  5. Grading scheme is simple, only Lab1-6 (6 lab sessions, including the 'online' Lab2) are graded. The last 5 lab sessions are reserved for Capstone Project:
    1. -24% - Proven beyond reasonable doubt that you/pair/triple/a group of you plagiarise lab files (second offence, i.e. lose all lab marks)
    2. -4% - Proven beyond reasonable doubt that you/pair/triple/a group of you plagiarise lab files (first offence, i.e. lost lab marks for that lab)
    3. 0% - Miss the lab without any proper MC (Medical Certificate) or other valid proof (except for the 'Online' Lab2)
    4. 1% - Present but does not met basic requirements after the lab session is over
    5. 2% - Met basic requirements and that's all...
    6. 3% - Fulfill at least two of the extra challenges of that lab
    7. 4% - Significantly exceed basic requirements and extra challenges, reserved for at most top 3 students (Lab 1) or 2 pair/triple (Lab 2-4) or 1 project group (Lab 5-6) per lab group, the lab showcase will feature some submissions from these students
  6. 5% Lab TA subjective score. Lab TA is given this amount to subjectively vary the student final grades by up to 1 letter grade (5% is approximately 1 letter grade swing) using the following criteria: 0-missing, 1/2-silent, 3-the average, or 4/5-active.
  7. During the free and easy time, Lab TA will circle around and then give lab score and immediate feedback right after that the face to face meeting that week (or see below).
  8. Students/pairs/triples/project groups are given up to Tuesday night 23:59 of that week to upgrade their lab submission and re-notify the Lab TA to verify their work online (starting Lab2 onwards, late submitters for Lab1 should just find Steven on Tuesday, 24 January 2017 post Lecture05). Lab TA has also been notified to be suspicious with "sudden improvements" if a student had difficulties on Monday during daytime when the Lab TA met them but suddenly he/she/the pair/the triple/the group submitted a "significantly good" solution later beyond what is normally possible. Clients will not like late product delivery, so submissions beyond Tuesday night 23:59 will not be counted at all.
  9. At the beginning of a lab session, Lab TA will always showcase "the best" 1-2 submission(s) from past week for inspiration (from past year for Lab1). Some Lab TAs have other technical expertise beyond what is formally covered in CS3226 lectures. They may share some of them with you.

Submission Instructions

For Lab1, the grading will be done manually (localhost), i.e. show your work at your own web browser using your own laptop to your Lab TA. If you cannot finish by Monday, 23 January 2017, then the latest time to show your work is by Tuesday, 24 January 2017, after Lecture05, to Steven directly.

For Lab2-6, the submission is online, just show the URL of your work and your Lab TA will check it online (and will use the normal Tuesday 23:59 deadline).

Footnotes

1 Who am I kidding, of course you WILL get the job (Lab 2-6) :).

2 Thus his modules are usually classified as 'competitive'/'heavy' which may not be suitable for everybody, including CS3226 students :O... but don't worry, the expectations for CS3233 versus CS3226 are very different. Steven is not going to enforce similar competitive level in CS3226. There will be some kind of competition, but not as intense as in CS3233.

3 I think these students won't mind... After all I am showing their positive achievements :).

Lab TA Checklist

  1. Introducing self, try to memorize all [15..18] students in your lab group.
  2. Stating expectations, Steven's Lab Style (version 2017), submission instructions, and other admin details.
  3. Live preview of the current version of this Ranklist app with a reminder that the features of this app is a moving target as Steven is currently improving it throughout the first half of this semester.
  4. Explaining the Basic technical requirements for Lab1.
  5. Help students in the Lab Group for any technical difficulties with HTML5/CSS3 concepts.
  6. Grade students who have completed Lab1 basic requirements and/or extra challenges.
  7. Before ending Lab1, do random pairing/tripling of students for Lab2-4, then briefly discuss the targets for the online Lab2.