Problem: Survey

tl;dr

Implement a web app that enables a user to

  • fill out a form, a la Google Forms, the results of which are saved to a comma-separated-value (CSV) file on the server, and

  • view a table of all of the submissions received, a la Google Sheets,

a la the below.

form
sheet

Academic Honesty

This course’s philosophy on academic honesty is best stated as "be reasonable." The course recognizes that interactions with classmates and others can facilitate mastery of the course’s material. However, there remains a line between enlisting the help of another and submitting the work of another. This policy characterizes both sides of that line.

The essence of all work that you submit to this course must be your own. Collaboration on problems is not permitted (unless explicitly stated otherwise) except to the extent that you may ask classmates and others for help so long as that help does not reduce to another doing your work for you. Generally speaking, when asking for help, you may show your code or writing to others, but you may not view theirs, so long as you and they respect this policy’s other constraints. Collaboration on quizzes and tests is not permitted at all. Collaboration on the final project is permitted to the extent prescribed by its specification.

Below are rules of thumb that (inexhaustively) characterize acts that the course considers reasonable and not reasonable. If in doubt as to whether some act is reasonable, do not commit it until you solicit and receive approval in writing from your instructor. If a violation of this policy is suspected and confirmed, your instructor reserves the right to impose local sanctions on top of any disciplinary outcome that may include an unsatisfactory or failing grade for work submitted or for the course itself.

Reasonable

  • Communicating with classmates about problems in English (or some other spoken language).

  • Discussing the course’s material with others in order to understand it better.

  • Helping a classmate identify a bug in his or her code, such as by viewing, compiling, or running his or her code, even on your own computer.

  • Incorporating snippets of code that you find online or elsewhere into your own code, provided that those snippets are not themselves solutions to assigned problems and that you cite the snippets' origins.

  • Reviewing past years' quizzes, tests, and solutions thereto.

  • Sending or showing code that you’ve written to someone, possibly a classmate, so that he or she might help you identify and fix a bug.

  • Sharing snippets of your own solutions to problems online so that others might help you identify and fix a bug or other issue.

  • Turning to the web or elsewhere for instruction beyond the course’s own, for references, and for solutions to technical difficulties, but not for outright solutions to problems or your own final project.

  • Whiteboarding solutions to problems with others using diagrams or pseudocode but not actual code.

  • Working with (and even paying) a tutor to help you with the course, provided the tutor does not do your work for you.

Not Reasonable

  • Accessing a solution to some problem prior to (re-)submitting your own.

  • Asking a classmate to see his or her solution to a problem before (re-)submitting your own.

  • Decompiling, deobfuscating, or disassembling the staff’s solutions to problems.

  • Failing to cite (as with comments) the origins of code, writing, or techniques that you discover outside of the course’s own lessons and integrate into your own work, even while respecting this policy’s other constraints.

  • Giving or showing to a classmate a solution to a problem when it is he or she, and not you, who is struggling to solve it.

  • Looking at another individual’s work during a quiz or test.

  • Paying or offering to pay an individual for work that you may submit as (part of) your own.

  • Providing or making available solutions to problems to individuals who might take this course in the future.

  • Searching for, soliciting, or viewing a quiz’s questions or answers prior to taking the quiz.

  • Searching for or soliciting outright solutions to problems online or elsewhere.

  • Splitting a problem’s workload with another individual and combining your work (unless explicitly authorized by the problem itself).

  • Submitting (after possibly modifying) the work of another individual beyond allowed snippets.

  • Submitting the same or similar work to this course that you have submitted or will submit to another.

  • Using resources during a quiz beyond those explicitly allowed in the quiz’s instructions.

  • Viewing another’s solution to a problem and basing your own solution on it.

Introduction

Getting Started

Here’s how to download this problem’s distribution into your own CS50 IDE. Log into CS50 IDE and then, in a terminal window, execute each of the below.

  1. Execute cd to ensure that you’re in ~/ (i.e., your home directory).

  2. Execute mkdir chapter7 to make (i.e., create) a directory called chapter7 in your home directory, if you haven’t already done so.

  3. Execute cd chapter7 to change into (i.e., open) that directory.

  4. Execute wget http://cdn.cs50.net/ap/2019/problems/survey/survey.zip to download a (compressed) ZIP file with this problem’s distribution.

  5. Execute unzip survey.zip to uncompress that file.

  6. Execute rm survey.zip followed by yes or y to delete that ZIP file.

  7. Execute ls. You should see a directory called survey, which was inside of that ZIP file.

  8. Execute cd survey to change into that directory.

  9. Execute ls. You should see this problem’s distribution code inside.

Understanding

application.py

This file represents your web app’s "controller," all of the logic that implements its functionality. Atop the file are a few imports of libraries followed by some configuration of Flask, per the comments therein. Below that are declarations of four routes, two of which are for you to do!

templates/layout.html

This file represents your web app’s layout, an HTML structure that all of your views will share.

templates/form.html

In this file will live your very own form, only the skeleton of which we’ve written for you.

templates/error.html

In this file is a template for any messages you might like to display to the user in the event of some error.

static/styles.css

In this file will be any of your own CSS properties for any or all of your app’s views.

Specification

  • Complete the implementation of templates/form.html in such a way that the form therein contains not only a button but also

    • one or more text fields of any type,

    • one or more checkboxes or two or more radio buttons,

    • one or more select menus, each with two or more options, and

    • zero or more other inputs of any type.

    Style that form using Bootstrap so that it looks nicer than it would with raw HTML alone.

    Add to that file some JavaScript code that prevents users from submitting the form if they have not provided values for one or more fields, alerting the user accordingly, as via alert or Bootstrap.

  • Complete the implementation of post_form in such a way that it

    • validates a form’s submission, alerting users with a message via error.html if they have not provided values for one or more fields, just in case your JavaScript code let something through (or was disabled),

    • writes the form’s values to a new row in survey.csv using csv.writer or csv.DictWriter, and

    • redirects the user to /sheet.

  • Complete the implementation of get_sheet in such a way that it

    • reads past submissions from survey.csv using csv.reader or csv.DictReader and

    • displays those submissions in an HTML table via a new template.

    Style that table using Bootstrap so that it looks nicer than it would with raw HTML alone.

    Optionally enhance the table with JavaScript, as via DataTables.

Provided you meet these specifications, you’re welcome to alter the aesthetics of your app however you’d like, as via Bootstrap or your own CSS and HTML.

References

Testing

Correctness

Afraid there’s no check50 for this problem; it’s incumbent upon you to write and test your code using the testing and debugging strategies we have discussed throughout the course. As in past problems where you have not had access to check50, know that your correctness score on this problem will be based on whether you meet the requirements of the specification as outlined above, whether your code is free of bugs, and whether your HTML is well-formed and valid. To ensure that your pages are, you can use the W3Schools HTML Validator service, copying and pasting your HTML directly into the provided text box. Take care to eliminate any warnings or errors suggested by the validator before submitting!

Style

style50 application.py

Afraid style50 does not support HTML files, and so it is incumbent upon you to indent and align your HTML tags cleanly, as the per the examples shown in prior weeks' lectures. Know also that you can create an HTML comment with:

<!-- Comment goes here -->

but commenting your HTML code is not as imperative as it is when commenting code in, say, C, Python, or JavaScript.

Staff’s Solution

And if you’d like to play with the staff’s own implementation of survey, you may visit the below URL.

https://survey.cs50.net/

It is reasonable to view its HTML and CSS.

How to Submit

Step 1 of 2

Ensure you have all of the files below:

  • application.py

  • templates/layout.html

  • templates/form.html

  • templates/error.html

  • static/styles.css

Be sure that each of your files are in ~/chapter7/survey, as with:

cd ~/chapter7/survey
ls

If any file is not in ~/chapter7/survey, move it into that directory, as via mv (or via CS50 IDE’s lefthand file browser).

Step 2 of 2

To submit survey, execute

+

cd ~/chapter7/survey/
submit50 cs50/problems/2019/ap/survey

+ inputting your GitHub username and GitHub password as prompted.

If you run into any trouble, email sysadmins@cs50.harvard.edu!

You may resubmit any problem as many times as you’d like.

Your submission should be graded for correctness within 2 minutes, at which point your score will appear at submit.cs50.io!

This was Survey.