All Collections
For Instructors
Grading Submission
[Front-End Web Development] Running Javascript on Submission
[Front-End Web Development] Running Javascript on Submission

This article teaches instructors how to properly run an instructor's proprietary javascript code on a learner's HTML code upon Submission

Written by Rizzian Tuazon
Updated over a week ago

The 'Front-End Web Development' lab type gives learners a work area which allows for the front-end development of a website. With this lab type, instructors are able to add Javascript code that can be used to evaluate the front-end page/functionality that's been written and developed by the learners.

Setting up the Script File

  1. Within the Front-End Web Development lab/assignment, navigate to the Workspace Configuration page.

  2. Under the file tree, navigate to the Resource > Scripts directory and create a new file titled 'submit.js'.

  3. Once the file is created, copy over the following javascript code:

     // Data that should go w/ the submission should be added to jsonResultsObject
    let jsonResultsObject = {};

    // Re-maps document to refer to rendered HTML
    let document = this.contentDocument;

    // Re-maps '$' JQuery function to target rendered HTML by default
    let $ = function (selector, context) {
    return new jQuery.fn.init(selector, context || document);

    /* Javascript code the evaluate learner submission goes below */

    Ensure that this code is always at the very top of the javascript script file in order to ensure that the javascript code works as it should.

  4. Any Javascript code written afterwards should now be able to properly evaluate the user submission.

Javascript Script Output

In order to record the results/output of the javascript code, store the values within the variable 'jsonResultsObject' which is provided/defined within the starter Javascript code that was provided above.

Once the submission is recorded, the results (data/values stored within jsonResultsObject) will be present within the '.vocsubmitjs.json' file which will be a file created as part of the submission.

Example Assignment

Below is an example Front-End Web Development lab/assignment. The provided files can be categorized as follows:

  • HTML Page

    • index.html

    • javascript.js

    • style.css

  • Script File

    • submit.js

The files categorized as a 'HTML Page' represent the web page that learners would create and are the files that will be used to generate the HTML page that code within 'submit.js' will subsequently evaluate.

The script file 'submit.js' contains the javascript code that will be ran and used to evaluate a learner's HTML page upon submission.

To setup the Example assignment, create a new lab/assignment with 'Front-End Web Development' as the selected lab type. Once that's done, configure the lab's workspace and place the provided files as follows:

  • HTML Page

    • index.html => resource/startercode/

    • javascript.js => resource/startercode/

    • style.css => resource/startercode/

  • Script File

    • submit.js => resource/scripts/

In order to test and make sure everything works, simply access the lab as a student (i.e. Student View) and do a submission which would then run 'submit.js'. The results should then be viewable within the '.vocsubmitjs.json' file which can be found by viewing the submission.

NOTE: If a submission is done within 'Student View', a popup will instead show up which will display the results/contents of '.vocsubmitjs.json'.

Did this answer your question?