Inspired by Jeff Batt’s video, I’ve developed a faster and more efficient way to grab the data model ID you need. This has huge implications beyond Jeff’s tutorial.
Streamlined JavaScript Function for Quick Data Model ID Retrieval
By using the following JavaScript function, you can quickly find and use the data model ID for your images based on their accessibility tags. This method is not only simpler but also significantly faster.
Step-by-Step Guide
- Copy and Paste the Function: Copy the function below and paste it into a JavaScript trigger in Articulate Storyline.
function getDataIdOfElement(altText) {
const selector = `[data-acc-text="${altText}"]`;
const element = document.querySelector(selector);
console.log("Selector used:", selector); // Log the selector
if (element) {
const dataModelId = element.getAttribute("data-model-id");
console.log("Data model ID:", dataModelId); // Log the data model ID
return dataModelId;
} else {
console.log("Element not found");
return null;
}
}
// Usage:
getDataIdOfElement("your accessibility text");
- Customize for Your Accessibility Tags: Adjust the function calls to match the alt text of your images. For example, if you have an image of a dog with the alt text “dogs,” you would call
getDataIdOfElement("dogs"). - Log and Use the Data Model ID: The function will log the selector used and the data model ID to the console, making it easy to copy and use the ID in your programming.
By incorporating this function into your workflow, you can save time and reduce the complexity of your coding tasks in Articulate Storyline. Give it a try and see how much more efficient your development process becomes!
Watch this video:
