Sample display--Yours will be different

ICT-4570 Homework 4


This assignment will allow you to design and create your own form, and have it compute current and projected scores, by category and total, based on the course grading criteria.
You will use HTML5, CSS, and JavaScript together to accomplish the goal.

What to Hand In

Canvas submission instructions:
Please combine multiple files into a single "zip" archive, and save it in a location that you will remember. When you are ready to submit the assignment solution, open the assignment in Canvas, and click on the Submit for Evaluation button at the top, attach the file, and click Submit for Evaluation at the bottom.


  1. Create a browser application which lays out and accepts input numbers for attendance, assignments, and evaluations (quizzes and exams).

    Since the syllabus sometimes changes, we'll fix the activities as:
    o 10 sessions for attendance
    o 5 evaluations of 100 points each, and one evaluation of 200 points
    o 5 assignments of 100 points each
    o Total score is computed as 10% attendance, 35% evaluations, and 55% assignments.

    1. Create the HTML form needed
    2. Create the CSS to style the form
    3. For each category of score, create a function that returns the contents as an array. Names like attendanceArray, assignmentArray, evaluationArray might be appropriate.
    4. Create a function that can take (any) array of numbers and return the average. The method should consider only "filled in" elements from the left (see Notes).
    5. Create a function that can get compute the weighted average of the 3 section averages and return the course average.
    6. Create a function that can convert a number score to a letter grade string, returning the string
    7. Create the 4 functions needed which will place the computed values in the correct, selected elements on the form
    8. Attach the "onclick" event for the form button to gather the form data and display it on the form within JavaScript.
    9. Create a JavaScript object which encapsulates an array for each category of scoring criteria.
      See the Notes for an example of using a fieldset to perform this.
    10. Stretch goal: You may wish to attach events to the "Average" labels so that when clicked, the average of that portion will be computed and displayed.
    11. Stretch goal: You may wish to create a function that can take 3 arrays and populate the form.



Criteria Weight
Clean HTML file with the requested form with appropriate fields 15
CSS file with any needed styling for the form 10
JavaScript functions which compute and return the user-provided arrays 15
JavaScript function or functions which compute the average based on available items. 20
JavaScript placement of results onto the form after a click. 20
Attaching the Evaluate button to onclick event within JavaScript 5
Screenshot of the form and result. 15
Stretch goal #1 +5
Stretch goal #2 +5