- Objectives
- Introduction
- Continuous Learning
- Assignment Reminders
- Accessing the Assignment
- Laboratory Assignment Tasks
- Automated Checks with GatorGrader
- Assignment Assessment
- Advance Feedback on an Assignment
- Discussion of a Graded Assignment
- Additional Resources
The learning objectives for this laboratory assignment are as follows:
- To use a Docker container to run the automated checks performed by GatorGrader
- To use a terminal window to run a web server through a Python program and observe its output
- To create unordered and ordered lists that contain hypertext references
- To create relative hypertext references to HTML and CSS files
- To create hypertext references that open new web browser tabs
- To create HTML and CSS for the presentation of tabular data
- To support user interactivity through the creation of an HTML form
- To connect the HTML form to the Formspree.io form solution service
- To perform cross-browser manual testing of an HTML form
- The implement cascading style sheets that select and style HTML elements
Designed for use with GitHub Classroom and
GatorGrader, this repository
contains a laboratory assignment for a web development course. The source code
and technical writing for this assignment must pass tests set by the
GatorGrader tool. When you use
the git commit
command to transfer your source code to your GitHub
repository, GitHub Actions will initialize a build of your assignment, checking
to see if it meets all of the requirements. If both your source code and
writing meet all of the established requirements, then you will see a green ✔
in the listing of commits in GitHub. If your submission does not meet the
requirements, a red ❌ will appear instead. Please note that, at the option of
the course instructor, some checks may be run in GitHub Actions that are not
run locally by the GatorGrader
tool.
If you have not done so already, please read all of the relevant GitHub Guides that explain how to use many of the features that GitHub provides. In particular, please make sure that you have read the following GitHub guides: Mastering Markdown, Hello World, and Documenting Your Projects on GitHub. Each of these guides will help you to understand how to use both GitHub and GitHub Classroom.
Students who want to learn more about how to use Docker should review the Docker Documentation. Students are also encouraged to review the documentation for their text editor, which is available at VS Code. You should also review the Git documentation to learn more about how to use the Git command-line client. In addition to talking with the instructor and technical leader for your course, students are encouraged to search StackOverflow for answers to their technical questions.
As outlined in the course schedule in the course planning repository, students should also read all of the assigned readings for up to and including the week of the semester on which this laboratory assignment was assigned.
-
Follow each step carefully. Slowly read each sentence in this document, making sure that you precisely follow each instruction. Take notes about each step that you attempt, recording your questions and ideas and the challenges that you faced. If you are stuck, then please tell a technical leader or the course instructor what assignment step you recently completed.
-
Regularly ask and answer questions. Please log into Slack at the start of the laboratory session and then join the appropriate channel. If you have a question about one of the steps in an assignment, then you can post it to the designated channel, discussing your questions through both Slack and the Google Meet designated for the class.
-
Store your files in GitHub. Starting with this laboratory assignment, you will be responsible for storing all of your files (e.g., Python source code and Markdown-based writing) in a Git repository using GitHub Classroom. Please verify that you have saved your source code in your Git repository by using
git status
to ensure that everything is updated. You can see if your assignment submission meets the established correctness requirements by using the provided checking tools on your local computer and by checking the commits in GitHub. -
Keep all of your files. Don't delete your programs, output files, and written reports after you submit them through GitHub; you will need them again when you study for the course assessments and work on the other laboratory, practical, and technical challenge assignments.
-
Hone your technical writing skills. Computer science assignments require to you write technical documentation and descriptions of your experiences when completing each task. Take extra care to ensure that your writing is interesting and both grammatically and technically correct, remembering that computer scientists must effectively communicate and collaborate with their team members and the student technical leaders and course instructor.
-
Review the Honor Code on the syllabus. While you may discuss your assignments with others, copying source code or technical writing is a violation of Allegheny College's Honor Code.
To access this assignment, you should go into the #announcements
channel in
our Slack workspace and find the announcement that provides a link for it. Copy
this link and paste it into your web browser. Now, you should accept the
laboratory assignment and see that GitHub Classroom created a new GitHub
repository for you to access the assignment's starting materials and to store
the completed version of your assignment. Specifically, to access your new
GitHub repository for this assignment, please click the green "Accept" button
and then click the link that is prefaced with the label "Your assignment has
been created here". If you accepted the assignment and correctly followed these
steps, you should have created a GitHub repository with a name like
Allegheny-Computer-Science-302-Fall-2020/computer-science-302-fall-2020-lab-6-gkapfham
.
Unless you provide the course instructor with documentation of the extenuating
circumstances that you are facing, not accepting the assignment means that you
automatically receive a failing grade for all of its components.
Before you move to the next step of this laboratory assignment, please make sure
that you read all of the content on the web site for your new GitHub repository,
paying close attention to the technical details about the commands that you will
type and the output that your program must produce. Now you are ready to
download the starting materials to your laboratory computer. Click the "Clone or
download" button and, after ensuring that you have selected "Clone with SSH",
please copy this command to your clipboard. At this point, you can open a new
terminal window and type the command mkdir cs302F2020
. To enter into this
directory you should now type cd cs302F2020
. Next, you can type the either
ls
(on either MacOS or Linux) or dir
(on Windows 10 Pro or Windows 10
Enterprise) and see that there are no files or directories inside of this
directory. By typing git clone
in your terminal and then pasting in the string
that you copied from the GitHub site you will "download" all of the code for
this assignment. For instance, if the course instructor ran the git clone
command in the terminal, it would look like:
git clone git@github.com:Allegheny-Computer-Science-302-F2020/computer-science-302-fall-2020-lab-6-gkapfham.git
After this command finishes, you can use cd
to change into the new directory.
If you want to "go back" one directory from your current location, then you can
type the command cd ..
. Finally, please continue to use the cd
and ls
commands to explore the files that you automatically downloaded from GitHub. If
one of the aforementioned commands does not work correctly, then it is possible
that your terminal window is not up-to-date or not configured correctly. In this
case, please share your specific error messages with the instructor, ultimately
working to master the use of terminal commands. What files and directories do
you see? What do you think is their purpose? Spend some time exploring, telling
your discoveries to a student technical leader.
This assignment invites you to learn how to write HTML and CSS files that
include headers, content, tags, style rules, and a form, specifically
implementing a "travel survey" web site leveraging the example in Figure 3.9 of
the textbook. As in previous assignments, you will create your travel web site
with features such as the use of a <table>
tag and emoji loaded from a CSS
library, additionally applying a style that adopts Google Web Fonts, customized
font sizes, and borders for a <footer>
. As in a previous assignment, you will
add an HTML table that is styled by additional CSS rules. Specifically, your
HTML table will feature a bold font for the header, alternating shading for its
rows, and interactivity evident when the user hovers over a cell.
As the main focus of this assignment, you will also use an HTML form and form
control elements to create a survey about international travel that will use
Formspree.io to provide a response by email. Finally, you will continue to
practice running a web server and using an automated tool to assess your
completion of a project. Specifically, you will create an extended version of
the travel photographs web site that looks like the one in the
screenshot in the images/
directory of your
repository. Overall, you will need to read and resolve all of the TODO
markers
in the provided HTML and CSS files. To start, you should add the source code
needed to import the three CSS files that to provide the styling for this web
page: site.css
, emoji.css
, and table.css
. You will also need to add all of
the source code to define the labels and form control elements in the form. The
following source code segment provides an example that should help you to start
your own HTML form:
<form action="https://formspree.io/gkapfham@allegheny.edu" method="POST">
<input type="hidden" name="_next" value="http://localhost:8000/"/>
<label>Name</label> <input type="text" name="name"> <br>
<label>Email</label> <input type="email" name="_replyto"> <br> <br>
Ultimately, your web site should contain all of the content as required by the
screenshot of the final version of the web page. Students should also check the
correctness of their HTML by running the command htmlhint src/www/index.html
in their terminal window. You should also ensure that all aspects of the page
preview correctly when you load them in your web browser. For instance, please
interact with the elements in the HTML to confirm that the "hover effect"
displays correctly on multiple browsers and devices.
To complete this laboratory assignment, please continue to follow the TODO
markers inside of the index.html
file as you add all of the required source
code to the index.html
file. As you are working, make sure that you run the
htmlhint
command-line linting tool to check your work and therefore ensure
that you are following the industry best practices for writing and formatting
HTML source code. Finally, you will need to manually test the running version of
your web site to ensure that the links in the lists open in the expected
fashion. The following list contains a reminder of the additional steps that you
should take as you are completing this laboratory assignment:
- Make sure that you follow Formspree's instructions to enable your form on their system
- Explore the options for the configuration of your Formspree-backed form. How does the Formspree system help to ensure that your form is secure?
- Don't forget to take a screenshot of some aspect of Formspree's web interface to demonstrate that your form was correctly communicating with the Formspree servers when you repeatedly submitted your form.
- Take the time to interact with your web form in at least three different web browsers. How do different browsers support the various aspects of completing and submitting a web form? In what way is this support similar and different?
Your GitHub repository contains a directory called www/
in the directory
called src/
. You can run the Python-based web server and point it to the
src/www/
directory, which will ultimately result in the creation of a web
site that features three HTML files.
python -m http.server --directory src/www
When I look in my terminal window after accessing the file served by this HTTP server I see the following output. Can you explain what this output means? What output do you see in your terminal window?
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
127.0.0.1 - - [06/Oct/2020 13:58:47] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [06/Oct/2020 13:58:47] "GET /css/table.css HTTP/1.1" 304 -
127.0.0.1 - - [06/Oct/2020 13:58:47] "GET /css/site.css HTTP/1.1" 304 -
127.0.0.1 - - [06/Oct/2020 13:58:47] "GET /css/emoji.css HTTP/1.1" 304 -
127.0.0.1 - - [06/Oct/2020 13:58:47] "GET /img/plane.jpg HTTP/1.1" 304 -
Once you have finished both of the previous technical tasks, use your text
editor to answer all of the questions in the writing/reflection.md
file. For
instance, you should explain the meaning of the two provided HTML source code
segments and answer all of the other questions about your experiences in
completing this laboratory assignment.
As you are working on your laboratory assignment, please make sure that you use
VSCode to regularly save your work and transfer it to the GitHub servers. For
instance, please use the git commit
command in your terminal window or use the
similar feature in VSCode to "stage" your changes in your repository. Once you
have committed your source code to your repository, you can use the git push
command to transfer your work to your GitHub repository, making it available for
the course instructor to assess. Please make sure that you regularly commit your
source code and technical writing, using descriptive commit messages to explain
how each commit changes the contents of the repository. Please do not use
vacuous commit messages that do not explain how your commit changes the contents
of the repository!
In addition to meeting all of the requirements outlined in this assignment sheet, your submission must pass the following checks that GatorGrader automatically assesses:
- The command
htmlhint src/www/*.html
executes correctly - The command output has exactly 1 lines
- The file emoji.css exists in the src/www/css directory
- The file formspree_evidence.png exists in the images directory
- The file index.html exists in the src/www/ directory
- The file reflection.md exists in the writing directory
- The file site.css exists in the src/www/css directory
- The file table.css exists in the src/www/css directory
- The file travels_example.png exists in the images directory
- The file travels_submission.png exists in the images directory
- The index.html in src/www/ has at least 0 of the
github.css
fragment - The index.html in src/www/ has at least 1 of the
<body>
fragment - The index.html in src/www/ has at least 1 of the
emoji.css
fragment - The index.html in src/www/ has at least 1 of the
formspree.io
fragment - The index.html in src/www/ has at least 1 of the
<head>
fragment - The index.html in src/www/ has at least 1 of the
<html>
fragment - The index.html in src/www/ has at least 1 of the
POST
fragment - The index.html in src/www/ has at least 1 of the
site.css
fragment - The index.html in src/www/ has at least 1 of the
table.css
fragment - The index.html in src/www/ has at least 1 of the
utf-8
fragment - The index.html in src/www/ has at least 2 of the
i class
fragment - The index.html in src/www/ has at least 3 of the
_blank
fragment - The index.html in src/www/ has at least 5 of the
a href
fragment - The index.html in src/www/ has exactly 0 of the
Add Your Name Here
fragment - The index.html in src/www/ has exactly 0 of the
TODO
fragment - The index.html in src/www/ has exactly 1 of the
<title>Travel Survey</title>
fragment - The reflection.md in writing has at least 1 of the
code
tag - The reflection.md in writing has at least 3 of the
code_block
tag - The reflection.md in writing has at least 500 word(s) in total
- The reflection.md in writing has exactly 0 of the
Add Your Name Here
fragment - The reflection.md in writing has exactly 0 of the
TODO
fragment - The reflection.md in writing has exactly 11 of the
heading
tag - The repository has at least 5 commit(s)
- The site.css in src/www/css has at least 1 of the
Montserrat
fragment - The site.css in src/www/css has at least 1 of the
Roboto Slab
fragment - The site.css in src/www/css has at least 2 of the
font-family
fragment - The table.css in src/www/css has at least 1 of the
#F1F1F1
fragment - The table.css in src/www/css has at least 1 of the
#FEFEFE
fragment - The table.css in src/www/css has at least 1 of the
nth-child(even)
fragment - The table.css in src/www/css has at least 1 of the
nth-child(odd)
fragment
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ Passed 40/40 (100%) of checks for cs302-F2020-lab6! ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
If GatorGrader's automated
checks pass correctly, the tool will produce the output like the following in
addition to returning a zero exit code (which you can access by typing the
command echo $?
). You will need to run
GatorGrader in a Docker
container by following the steps in the Using Docker section.
Taking inspiration from the principles of specification-based grading, the grade that a student receives on a laboratory assignment will be based on whether or not it meets the standards for technical work in the fields of software engineering and discrete structures. Instead of receiving a single numerical or letter grade for this assignment, your grade will have the following components:
-
Percentage of Correct GatorGrader Checks Ranging Between 0 and 100: Your submitted Python program must pass all of GatorGrader's checks by, for instance, ensuring that it produces the correct output and has all of the required characteristics. Your technical writing must pass all of GatorGrader's checks about, for instance, the length of its output and its use of the required Markdown language features for technical writing. For this component of a laboratory assignment's grade, your work will receive a percentage, ranging from 0 to 100, that corresponds to the percentage of GatorGrader checks that automatically pass inside of a GitHub Actions build.
-
GitHub Actions Build Status of Either ✔ or ❌: Since additional checks on the Python source code and/or technical writing are encoded in GitHub Action workflows and, moreover, all of the GatorGrader checks are also run in GitHub Actions, your work will receive a checkmark grade if the last before-the-deadline build in GitHub Actions passes and a ✔ appears in the GitHub commit log instead of an ❌. The build status reported by GitHub Actions will only be a ✔ if the source code and technical writing in the GitHub repository pass all of both the GatorGrader checks and the additional checks.
-
Technical Writing Mastery of Either ✔ or ❌: Students will also receive a ✔ grade when the responses to the technical writing questions presented in the
writing/reflection.md
reveal a mastery of technical writing skills. To receive a checkmark grade, the submitted writing should have correct spelling, grammar, punctuation, and formatting in addition to following the rules of the Markdown language. Your work will receive a ✔ grade for this component if the build report from GitHub Actions reveals that there are no detected mistakes in the technical writing. -
Technical Knowledge and Skill Mastery of Either ✔ or ❌: Students will also receive a checkmark grade when the GitHub repository reveals that they have mastered all of the technical knowledge and skills developed during the completion of the laboratory assignment. As a part of this grade, the instructor will assess aspects of the project including, but not limited to, the use of effective Python source code comments, correct Git commit messages, and accurate responses to the technical writing questions.
Students who wish to receive feedback on their work for any course assignment should first open an issue on the issue tracker for their assignment's GitHub repository, giving an appropriate title and description for the type of feedback that you would like the course instructor to provide. After creating this issue, you will see that GitHub has created a unique web site that references it. To alert the course instructor to the fact that the issue was created and that you want feedback on your work, please send it to him by a Slack direct message at least 24 hours in advance of the project's due date. After the instructor responds to the issue, please resolve all of the stated concerns and participate in the discussion until the issue is resolved and ultimately marked as closed.
Students who wish to receive feedback on their work for any graded course assignment should leave question in the same region of Github where the course instructor submitted the assignment's grade. For example, if the instructor submits your grade to a pull request in your repository for a laboratory assignment, then you should ask questions about your grade in that pull request, bearing in mind the need to @-mention the course instructor in the body of your comment. Students can continue to discuss the graded assignment with the course instructor until they understand all the technical topics that were the focus of the particular assignment.
This project invites students to enter system commands into a terminal window.
This assignment uses Docker to deliver programs, such
as gradle
and the source code and packages needed to run
GatorGrader, to a students'
computer, thereby eliminating the need for a programmer to install them on their
development workstation. Individuals who do not want to install Docker can
optionally install of the programs mentioned in the Project
Requirements section of this document.
Once you have installed Docker
Desktop, with MacOS and Linux
you can use the following docker run
command to start gradle grade
as a
containerized application, using the
DockaGator Docker image available
on
DockerHub.
docker run --rm --name dockagator \
-v "$(pwd)":/project \
-v "$HOME/.dockagator":/root/.local/share \
gatoreducator/dockagator
The aforementioned command will use "$(pwd)"
(i.e., the current working
directory) as the project directory and "$HOME/.dockagator"
as the cached
GatorGrader directory. Please note that both of these directories must exist,
although only the project directory must contain something. Generally, the
project directory should contain the source code and technical writing for an
assignment, as provided to a student by the instructor through GitHub.
Additionally, the cached directory should not contain anything other than
directories and programs created by DockaGator, thus ensuring that they are not
otherwise overwritten during the completion of the assignment.
To ensure that the previous command will work correctly, you should create the
cache directory by running the command mkdir $HOME/.dockagator
on the MacOS
and Linux operating systems. However, if you are using the Windows operating
system then you will instead need to type the command mkdir %HomeDrive%%HomePath%/.dockagator
. Finally, since the above docker run
command does not work correctly on the Windows operating system, you will need
to instead run the following command to adapt to the differences in the cmd
terminal window:
docker run --rm --name dockagator \
-v "%cd%:/project" \
-v "%HomeDrive%%HomePath%/.dockagator:/root/.local/share" \
gatoreducator/dockagator
Please note that not all version of the Windows terminal window will correctly
recognize the use of the %cd%
and %HomeDrive%%HomePath%
variables. In this
case, you should substitute the actual directory for a specific course
assignment for the %cd%
variable and the drive letter that contains the
.dockagator
directory for the %HomeDrive%%HomePath%
variable. Finally, the
Windows terminal window may not work correctly when you attempt to run a
multi-line command. In this case, you should break up the aforementioned
four-line command into separate lines, like docker run --rm --name dockagator
and -v "%cd%:/project"
and then connect them into a single long line that you
separate by a single space. Here is an example of what the long command would
look like, again assuming that the Windows cmd
terminal correctly interprets
the %cd%
and %HomeDrive%%HomePath%
variables:
docker run -it --rm --name dockagator -v "%cd%:/project" -v "%HomeDrive%%HomePath%/.dockagator:/root/.local/share" gatoreducator/dockagator /bin/bash
Here are some additional commands that you may need to run when using Docker:
docker info
: display information about how Docker runs on your workstationdocker images
: show the Docker images installed on your workstationdocker container list
: list the active images running on your workstationdocker system prune
: remove many types of "dangling" components from your workstationdocker image prune
: remove all "dangling" docker images from your workstationdocker container prune
: remove all stopped docker containers from your workstationdocker rmi $(docker images -q) --force
: remove all docker images from your workstation
Since the above docker run
command uses a Docker images that, by default, runs
gradle grade
and then exits the Docker container, you may want to instead run
the following command so that you enter an "interactive terminal" that will
allow you to repeatedly run commands within the Docker container. Don't forget
that, if you are using the Windows operating system, then you will need to use a
different command to run Docker, as explained previously in this document.
Importantly, the command that you type if you are a Windows user should still
contain the -it
at the start of the docker run
and the /bin/bash
at the
end of the command. However, the other components of this command need to be
customized for the Windows operating system.
If you use either MacOS or Linux, then this is the command that you would run to enter into the interactive terminal provided by a Docker container:
docker run -it --rm --name dockagator \
-v "$(pwd)":/project \
-v "$HOME/.dockagator":/root/.local/share \
gatoreducator/dockagator /bin/bash
If you use Windows, then this is the command that you would run to enter into the interactive terminal provided by a Docker container:
docker run -t --rm --name dockagator \
-v "%cd%:/project" \
-v "%HomeDrive%%HomePath%/.dockagator:/root/.local/share" \
gatoreducator/dockagator /bin/bash
Once you have typed this command, you can use the GatorGrader
tool in the Docker container by
typing the command gradle grade
in your terminal. Running this command will
produce a lot of output that you should carefully inspect. If GatorGrader's
output shows that there are no mistakes in a course assignment, then your source
code and technical writing are passing all of the automated baseline checks.
However, if the output indicates that there are mistakes, then you will need to
understand what they are and then try to fix them.
Remember, to correctly run any of the commands mentioned in this guide, you must
be in the main (i.e., "home base") directory for a course assignment where the
build.gradle
file is located.
If the course instructor provides a new version of the Docker container called
gatoreducator/dockagator
and you want to receive it immediately, you must
first delete the existing Docker container on your laptop by running the command
docker rmi gatoreducator/dockagator
. Next, you can re-run one of the
aforementioned Docker commands, like the following one, which would work on
MacOS or Linux:
docker run -it --rm --name dockagator \
-v "$(pwd)":/project \
-v "$HOME/.dockagator":/root/.local/share \
gatoreducator/dockagator /bin/bash
Please note that if you attempt to run gradle grade
in an updated Docker
container it is possible that the command will execute incorrectly if you
previously used GatorGrader with a Docker container that featured a different
version of the Python programming language. In this situation, you should delete
the directories inside of the .dockagator
directory and then again attempt to
run the gradle grade
command inside of the Docker container. Specifically, you
will need to delete directories in .dockagator
that are normally called
gatorgrader
, virtualenv
, and virtualenvs
.
If the course instructor pushes updates to this assignment and you received it through GitHub Classroom and you would like to also receive these updates, then you can type this command in the main directory for this assignment:
git remote add download git@github.com:Allegheny-Computer-Science-302-F2020/cs302-F2020-lab6-starter.git
You should only need to type this command once; running the command additional times may yield an error message but will not negatively influence the state of your Git repository. Now, you are ready to download the updates provided by the GatorGrader maintainers by typing this command:
git pull download master
This second command can be run whenever the course instructor needs to provide you with new source code for this assignment. However, please note that, if you have edited the files that we updated, running the previous command may lead to Git merge conflicts. If this happens, you may need to manually resolve them with the help of the instructor or a student technical leader. Finally, please note that the Gradle plugin for GatorGrader will automatically download the newest version of GatorGrader.
This assignment uses GitHub Actions to automatically run GatorGrader and additional checking programs every time you commit to your GitHub repository. The checking will start as soon as you have accepted the assignment — thus creating your own private repository — and the course instructor and/or GitHub enables GitHub Actions on it. If you do not see either a yellow ● or a green ✔ or a red ❌ in your listing of commits, then please ask the course instructor to see whether or not GitHub Actions was correctly enabled.
This assignment was developed to work with the following software and versions:
- Docker Desktop
- Operating Systems
- Linux
- MacOS
- Windows 10 Pro
- Windows 10 Enterprise
- Programming Language Tools
- Gradle 6.6
- MDL 0.5.0
- Python 3.7 or 3.8
If you have found a problem with this assignment's provided source code or documentation, then you can go to the Computer Science 302 Fall 2020 Planning Repository and raise an issue. If you have found a problem with the GatorGrader tool and the way that it checks your assignment, then you can also raise an issue in that repository. To ensure that your issue is properly resolved, please provide as many details as is possible about the problem that you experienced. Individuals who find, and use the appropriate GitHub issue tracker to correctly document, a mistake in any aspect of this assignment will receive extra credit towards their grade for the course.
If you are having trouble completing any part of this project, then please talk with either the course instructor or a student technical leader during the course session. Alternatively, you may ask questions in the Slack workspace for this course. Finally, you can schedule a meeting during the course instructor's office hours.