This article will describe how to build a custom data table response area from scratch for your Science Interactive Lab Portal Course. This does require a small amount of understanding of how HTML coding works.
1. Navigate to the Content Repository. Find the content folder you would like to build your table in "All Content Types."
We suggest building new content in "All Content Types" before adding it to an assignment to ensure you don't lose any work.
2. Select "Create New", then select "Question/Text."
3. Type the name of your data table in the "Question Name" field.
This is not visible to students when added to an assignment. If you would like students to see the title of the data table, add it as the heading 1 in the rich text editor below.
4. Use the Table tool to build your data table.
Set the highlighted parameters to build your table, select "OK."
5. Fill in the parts of the table that will not be used for student input.
6. Select the Source button.
7. Find the empty cells in the source code, where the student inputs will go.
Between <td> and </td> replace the " " with the code line below. Ensure you include the < /> around that line of code.
<input placeholder=" " type="text" id=var1 />Text area's should be used for observations and longer descriptions.
<textarea id="var1" placeholder=" "></textarea>As you replace the " " with the input, make sure you change the id number so it goes in numeric order.
8. Add the "div" around your table code.
This helps define your table code as an identifiable block for the java script later in this article.
<div id="datatable"> /Table code goes here </div>
9. Highlight the entire block of code, including the <div></div>. Use the "cut" command to grab it to your computer's clipboard.
10. Select the "Source" button again to exit the code editor. Next, select the "Mobius component", then "HTML."
11. Select "Manually graded" in the "Grading Type" drop-down. Then, paste your table code in the Question HTML.
12. Scroll down. Copy and Paste the css code block (below) in the HTML Question CSS.
#datatable {width:100%;
}
table {Font-family: Lato;
border-collapse: collapse;
}
th {background-color: #657277; Font-family: Lato; color: white; font-size:13pt;
font-weight: bold; padding-left: 5px; padding-right: 5px;}
td {color:#103E5B;
font-size:11pt;
padding-left: 5px;
padding-right: 5px;
}
#manualgradingmsg {
color:#103E5B;
Font-family: Lato;
font-size:13pt;
padding-left: 5px;
padding-right: 5px;
}
input {width:100%;
}
textarea {
width: 100%;
height: 80px;
padding: 5px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
resize: both; /* Allow both horizontal and vertical resizing */
overflow: auto; /* Add scrollbars when needed */
}
13. Scroll down. Copy and Paste the JavaScript (below).
Make sure the number of "#varX" in the JavaScript matches the number of "#varX" in the Question HTML.
function initialize(interactiveMode) {
/* Called when the question is being initialized.
interactiveMode: if it is true, interaction is allowed on question.
*/
/* Your code starts from here:*/
if (!interactiveMode) {
jQuery(
'#var1, #var2, #var3, #var4, #var5, #var6, #var7, #var8, #var9, #var10, #var11, #var12, #var13, #var14, #var15, #var16, #var17, #var18, #var19, #var20'
).prop('readonly', true);
} else {
jQuery(
'#var1, #var2, #var3, #var4, #var5, #var6, #var7, #var8, #var9, #var10, #var11, #var12, #var13, #var14, #var15, #var16, #var17, #var18, #var19, #var20'
).on('input');
}
}
function setFeedback(response, answer) {
/* called when response or answer is going to
be rendered.
response: student's response of question.
answer: correct answer of question.*/
/* Your code starts from here:*/
if (answer != null) {
/*Correct answer view*/
jQuery('#datatable').hide();
jQuery('#manualgradingmsg').html(answer.replaceAll("\"", ""));
} else {
/*User response view*/
jQuery('#manualgradingmsg').hide();
if (response == "No answer" || !response) {
/*Initial state*/
return;
} else {
/*User's response*/
var parsedResponse = JSON.parse(response);
parsedResponse.forEach((responseItem) => {
jQuery(responseItem.id).val(responseItem.value);
});
}
}
}
function getResponse() {
/* called when grade button is clicked,
to retrieve back student's response.*/
/* Your code starts from here:*/
const ids = [
'#var1',
'#var2',
'#var3',
'#var4',
'#var5',
'#var6',
'#var7',
'#var8',
'#var9',
'#var10',
'#var11',
'#var12',
'#var13',
'#var14',
'#var15',
'#var16',
'#var17',
'#var18',
'#var19',
'#var20'
];
const response = [];
for (let i = 0; i < ids.length; i++) {
response.push({ id: ids[i], value: jQuery(ids[i]).val() });
}
return JSON.stringify(response);
}
/*Additional functions start from here*/
There are three sections that the "#varX" needs to match the id's in the HTML. Two at the top of the JavaScript and the long list at the bottom.
Suggestion! To add, copy and paste a small section of the JavaScript "#varX" and then change the numbers to match. To subtract, delete the number of "#varX" to Match the HTML id's. Make sure to follow the guidelines below.
In the top two sections of "#varX", make sure there is a comma + a space between each "#varX" and an apostrophe after the last "#varX".
In the section at the bottom, make sure the formatting remains the same. The last "#varX" should not have a comma after it and each "#varX" should have an apostrophe on each side of it.
14. Select the "Update" button.
This action will direct you back to the Question Text editor.
15. Scroll down to the Custom CSS section, Select the "Theme" button. Drag the Science Interactive theme from the "Available Themes" column to the "Applied Themes" column. Select "Apply."
16. Select "Preview" to test your Data Table.
17. Type in some of the cells to make sure they are working. Select the "Grade" button.
18. Check that the text you typed in appears in the "submitted" Data Table. Select "Close."
The "Correct response" area should look like this. If your typed text does not appear you may have a typo in your HTML or JavaScript.
19. Select "Save & Close."
After saving, follow the steps in the How to add Content to an Assignment article.