HW 4c. Prototyping - An interactive web app with JavaScript (due Sun, 5/30)

In HW 4c, you'll build a single page web application based on your digital mockup from HW 4a and your HTML file from HW 4b. You will use a JavaScript framework to implement interactions (e.g., adding courses to the schedule table).

Steps:

1. Please download this data file to your computer: cs565_hw4c_schedule_data.json (https://canvas.oregonstate.edu/courses/1839295/files/87460572/download?download_frd=1)

○ It stores the schedule information for 76 courses. You can assume this is the entire data, and users can register only from this list. All courses are from Spring 2021.

○ It looks like this:

■ {

"days": ["M", "T", "W", "R", "F"],

"hours": [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],

"courses": [

{

"code": "AEC 532",

"title": "ENVIRONMENTAL LAW",

"times": [

{"day": "T", "hour": 12, "duration": 2},

{"day": "R", "hour": 12, "duration": 2}

],

"instructor": "C. Brekken"

},

{

"code": "AEC 551",

"title": "APPLICATIONS OF ENVIRONMENTAL AND NATURAL RESOURCE

ECONOMICS",

"times": [

{"day": "M", "hour": 12, "duration": 2},

{"day": "W", "hour": 12, "duration": 2}

],

"instructor": "W. Jaeger"

},

2. Then please download this skeleton HTML file: cs565_hw4c.html (https://canvas.oregonstate.edu/courses/1839295/files/87460710/download?download_frd=1)

○ This file contains the skeleton for those who will use Vue.js.

■ It includes code for loading the json file. Please make sure that the html and json files are located in the same folder.

■ It also includes some examples of uses. You can delete it.

3. How to run it from your computer?

○ I recommend you to use python http.server to run a very simple web server. Assuming Python 3 is already installed on your computer, from Terminal (or PowerShell, Git Bash), you can run:

python -m http.server 8080

■ You may use npm http-server or similar libraries instead.

■ If you are using Python 2, your command is slightly different. It's like: python -m SimpleHTTPServer 8080.

○ Then you can open your web browser, and go to http://localhost:8080/cs565_hw4c.html

○ It should show the same header you saw from HW 4b, two buttons (i.e., A, B) and the title of 76 courses.

4. Now you can start working on your homework.

○ Your goal is to build a high-fidelity prototype. It must implement all the interactions you designed in your HW 4a by using HTML, CSS, and JavaScript.

FAQ:

● Can I use something other than Vue.js?

○ Vue.js is recommended, but you can use other JavaScript frameworks.

○ React is allowed, but please make sure to provide an instruction of how we can run your code. It is more popular, but likely be harder if you haven't used it before.

○ If you have heard of Svelte before, I recommend you to use Svelte. It will likely be easier for you.

○ You may use something other than Vue.js, React, or Svelte, but please check with Prof. Kahng before. Also, you have to make sure to provide a clear instruction of how we can run your code.

● Can I use pure JavaScript or jQuery?

○ Yes you can. But I recommend you to try out frameworks like Vue.js. Reactive frameworks like React and Vue.js are becoming standard in web development these days. It should increase your productivity. But if you have much experience with pure JavaScript, TypeScript, or jQuery, you can use it.

● Can I use library X, Y, or Z?

○ I recommend you minimize the use of external libraries. But you can use a few for styling (e.g., font-awesome, google web font, etc).

● Can I use implement with multiple files?

○ It is possible to implement everything in a single HTML file. If you implemented in this way, you only need to submit the HTML file.

○ If you ended up using multiple files (e.g., to have multiple components, to use React or Svelte), you can do it. But then you need to zip all the files, including the json file, and include a README.txt file for us to know how to run it.

● Can I change the json data file?

○ You shouldn't have to change the actual .JSON file. You can make any decisions about what data you use from the .JSON after you parse it, but you chould be able to take a provided JSON file and parse it for data.

● Can I implement it as a mobile app?

○ We strongly recommend to develop it as a web app. This page does not need to be responsive to multiple devices. You can assume this webpage will only be accessed from Chrome or Firefox installed on desktop, and your interface has a fixed width (e.g., 1200px).

● What if I revised my design?

○ Then please submit a one-page PDF file that has less than 100 words of text that describe the changes.

● What if I worked with my friends?

○ If you have seen code written by one of your CS 565 peers, then you must provide the names of the persons and briefly describe how you referred to their code. You still need to write your own code by yourself. No copy and paste. You'll get 0 point if we think your code is too similar to others.

● What if I copied some code from the web?

○ It's possible to get information of how to implement a specific feature. But if you used a significant portion of the code from the web, cite it in your code (via comment) and the optional PDF document you will submit.

Requirement

This text is revised from that for HW 4a. Your application should support the following user tasks:

● At first, a user can search for courses using keywords (like "CS" or "Human"). A filtering function will be applied to "course code" and "course title".

○ You can assume that all courses are for Spring 2021.

● A list of courses that match the filtering criteria will be shown. Your webpage should show at least three attributes about each course in the search result: course code, course title, and instructor.

○ You can assume that there is only one section for a (course code, course title) pair.

● The webpage shows a timetable.

● A user can add a course from the search result to the timetable.

○ It will likely be done by clicking a HTML element (e.g., button, text, row, checkbox).

● Before they add a course, a user can see a preview of an updated timetable ("what if I add this course to the timetable?").

○ It will likely be implemented as a mouseover interaction.

● A user can keep adding courses to the timetable.

● A user can remove a course from the timetable.

○ There might be multiple ways to do it.

● Multiple courses can be added even if they have scheduling conflicts.

○ Multiple courses should be shown in the timetable.

● [important!] A user can clearly see differences between added courses, not-added courses, a course in preview, etc.

○ A course that is not added to the timetable must look different from a course that has been added (e.g., different background color, as in the paper prototype PDF for HW 4a).

Submission

If your code only consists of a single file, please submit one HTML file named cs565_hw4c.html.

If it consists of multiple files, please submit your work as a zip file named: cs565_hw4c_YOURFIRSTNAME.zip. This zip file must contain a README.txt or README.md. Your code should be runnable with 1 or 2 commands (e.g., npm install && npm start)

You need to optionally include a one-page PDF file if

● You have significantly changed the design of the page. Then you can optionally include less than 100 words of text that describe the changes.

● OR you have seen code written by one of your CS 565 peers. Then you must provide the names of the persons and briefly describe how you referred to their code. You still need to write your own code by yourself. You'll get 0 point if we think your code is too similar to others.

Grading

20 points (5% of your total grade)

● 8 pt: Design of interface

○ Is it usable?

○ Does it follow the design principles covered from class (e.g., use of color, Gestalt principles, alignment)?

○ Can a user quickly and easily add a course to the timetable and/or get a preview before adding it to the table?

○ If changed from HW 4a or HW 4b, are the changes described?

● 6 pt: Interactions and functionalities

○ Does it implement all the required interactions mentioned above?

○ Can a user clearly identify differences between states (e.g., added, not added, preview)?

● 6 pt: Quality of code

○ Is the code readable (e.g., indentation)?

○ Is there any hard-coded part? (There shouldn't be.)

○ Are HTML elements used correctly (titles as header tags, sections divided in <div>s, etc)?

○ Are the style (css), structure (html), and program (javascript) of the program separated (e.g., used id and class tags rather than inline CSS, using <head>/<body> appropriately, etc)?

○ Is it implemented based on the reactive paradigm?

○ Does the submission follow all the instruction given in this document (e.g., filename, README)?

You'll get 0 points if we identify plagiarism.