...
When a custom web activity is integrated in Terracotta as a an LMS assignment, your activity is responsible for supporting student learning and reliably returning students’ scores back the LMS. The custom web activity must comply with Terracotta’s Terms of Use, and the custom web activity is also responsible for presenting an interface that is accessible to diverse learners. Before integrating a custom web activity, ensure the following:
...
| Code Block | ||
|---|---|---|
| ||
<div id="activity-container">
<p>Solve for x: 2x + 3 = 7</p>
<label for="answer">Your answer for x:</label>
<input type="text" id="answer" name="answer">
<button id="answer-btn" onclick="checkAnswer()">Answer</button>
<p id="feedback"></p>
<button id="submit-btn" onclick="submit()" style="display:none">Submit</button>
</div> |
Following this code (but still within the HTML body of the activity)Then, contained within <script></script> tags, there is a script that handles user input, records responses, and redirects back to Terracotta upon submission:
| Code Block | |
|---|---|
|
...
| |
// Get URL parameters
|
...
const queryString = window.location.search; |
...
|
...
const urlParams = new URLSearchParams(queryString); |
...
let url_launch_token = urlParams.get('launch_token'); // Single-use launch token |
...
const url_pid = urlParams.get('anonymous_id') // Participant ID |
...
|
...
// If there is no launch_token provided, assume that this is a preview |
...
if (url_launch_token == "" || url_launch_token == null || url_launch_token == undefined) {
|
...
url_launch_token = "00000000-0000-4000-B000-000000000000"; // reserved preview token
|
...
} |
...
|
...
// Variable for the student's score |
...
|
...
let score = 0; |
...
// Container for responses |
...
|
...
let responses = [];
|
...
function checkAnswer() {
|
...
// Get timestamp
|
...
var timestamp = Date.now(); |
...
|
...
// Correct answer
|
...
const correctAnswer = 2; // (2x + 3 = 7, x = 2) |
...
|
...
// Get the user's answer from the input field |
...
|
...
const userAnswer = document.getElementById("answer").value;
|
...
// Evaluate answer correctness |
...
|
...
var correctness = parseFloat(userAnswer) === correctAnswer; |
...
if (correctness) score += 1; |
...
|
...
// Push the response
|
...
responses.push({ |
...
pid: url_pid, |
...
|
...
question: "2x + 3 = 7", |
...
|
...
correctAnswer: correctAnswer, |
...
|
...
response: userAnswer,
|
...
correctness: correctness, |
...
|
...
datetime: timestamp |
...
|
...
}); |
...
|
...
// Display feedback and enable submit button |
...
|
...
const feedback = document.getElementById("feedback");
|
...
feedback.textContent = JSON.stringify(responses); // save this
|
...
document.getElementById("answer-btn").disabled = true; |
...
|
...
document.getElementById("submit-btn").style.display = 'inline-block';
|
...
} |
...
|
...
function submit() { |
...
|
...
window.location.href = `https://app.terracotta.education/integrations?launch_token=${url_launch_token}&score=${score}`
|
...
} |
...
|
To summarize:
The script receives the launch_token and the anonymous_id from URL parameters.
If the launch_token is missing, it assumes that the activity is a preview and assigns the reserved preview token ("00000000-0000-4000-B000-000000000000").
It then initializes the user’s score (0), and a container to record the user’s responses ([]).
A function is defined, checkAnswer(), which is called when the answer button (answer-btn) is pressed. The checkAnswer() function…
records a timestamp of the user’s response (in Unix timestamp format, the number of milliseconds since January 1, 1970)
establishes the correct answer
evaluates the correctness of the user’s response
updates the user’s score
pushes the user’s response into the response container
displays the contents of the response container and enables a final submit button
The function submit() is called when the user presses the submit button, which redirects the user back to Terracotta with the provided launch_token and calculated score.