Storing a form value outside of Riddle to perform a math operation and passing the result back to Riddle via the Data Layer to be displayed on the result page.
Important:
On the 'Publish' -> 'Tracking' step in the Riddle creator, you need to enable 'Custom tracking'.Then also select 'Custom even configuration' and enable 'Send form data (User Inputs)'.
Then add the event listener script below into the custom tracking box in Riddle to replace our default script, which merely logs all events to the browser console.
(riddleEvent) => {
// Create a message object with the event data
const message = {
type: "riddleEvent",
data: riddleEvent
};
// Send the message to the parent page
window.parent.postMessage(message, "*");
};
The screenshot below shows where to add this code to your Riddle:
Place the code below on the same page where you embed the Riddle. Here is what this code will do:
<script>
let calcresult; // Declare calcresult globally
window.addEventListener("message", function(event) {
var eventData = event.data;
if (eventData.action === "Form_Submit") {
var answerParts = eventData.answer.split(':::');
var calcValue = answerParts[1].startsWith(':') ? answerParts[1].slice(1) : answerParts[1];
console.log("Calculator value retrieved: ", calcValue);
calcresult = parseFloat(calcValue) * 19; // Calculate directly
console.log("Multiplied value: ", calcresult);
// Push to data layer
if (typeof window.riddleDataLayer === 'undefined') {
window.riddleDataLayer = [];
}
window.riddleDataLayer.push({key:"totalcost", value: calcresult.toString()}); // Convert calcresult to string if necessary
}
});
<script>
The screenshot below shows where to add the variables to your Riddle result page:
Riddle Technologies AG. All rights reserved.
The quiz maker