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
Within the Front-End Web Development lab/assignment, navigate to the Workspace Configuration page.
Under the file tree, navigate to the
Resource > Scriptsdirectory and create a new file titled 'submit.js'.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.
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'.