As a newcomer to JavaScript, I am faced with the challenge of creating a centralized glossary within a confined educational environment (LMS) that lacks a database or any other facilitating elements. My objective is to develop a script hosted on our application server that can be integrated into approximately twelve courses. Additionally, one of the requirements outlined by the learning designer is the ability to have two or more glossaries displayed on the same page. The terms and definitions are stored in a file called glossary.json, structured as follows:
{
"a": [
{
"module": "1.1",
"term": "A term in module 1.1",
"definition": "<p>A definition in 1.1</p>"
}, {
"module": "1.2",
"term": "A term in module 1.2",
"definition": "<p>A definition in 1.2</p>"
}
]
}
The goal is to embed relevant terms for each course section directly using a query parameter like so:
<h2>Module 1.1</h2>
<p>Content related to module 1.1 goes here</p>
<script src="glossary.js?m=1.1"></script>
<h2>Module 1.2</h2>
<p>Content related to module 1.2 goes here</p>
<script src="glossary.js?m=1.2"></script>
The glossary.js script generates a div element with an id based on the m parameter value, displaying only the pertinent terms:
function ajax_get(url, callback) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log(xmlhttp.responseText);
try {
var data = JSON.parse(xmlhttp.responseText);
} catch(err) {
console.log(err.message + " in " + xmlhttp.responseText);
return;
}
callback(data);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
var script = document.currentScript;
var queryString = script.src.replace(/^[^\?]+\??/,'');
var urlParams = new URLSearchParams(queryString);
var module = urlParams.get('m');
var el = document.createElement("div");
el.setAttribute("id", "glossary"+module);
document.body.appendChild(el);
ajax_get('glossary.json', function(data) {
var html = "<dl>";
for (var i=0; i < data["a"].length; i++) {
if (data["a"][i]["module"] == module) {
html += '<dt>' + data["a"][i]["term"] + '</dt>';
html += '<dd>' + data["a"][i]["definition"] + '</dd>';
}
}
html += "</dl>";
el.innerHTML = html;
});
In the provided example, although the script is executed twice and creates two div elements, it populates only the last one:
<h2>Module 1.1</h2>
<p>Content related to module 1.1 goes here</p>
<script src="ajax.js?m=1.1"></script>
<div id="glossary1.1"></div>
<h2>Module 1.2</h2>
<p>Content related to module 1.2 goes here</p>
<script src="ajax.js?m=1.2"></script>
<div id="glossary1.2">
<dl>
<dt>A term in module 1.2</dt>
<dd><p>A definition in 1.2</p></dd>
</dl>
</div>
I'm encountering challenges getting this functionality to work as expected. Despite each script executing independently until the JSON content is fetched, both ultimately display the same undesired outcome. Could the issue be something simple? Any insights into what might be causing this behavior would be greatly appreciated.