dcollien/xapi_test.html

## xapi_test.html
<html>
 <head>
  <title>Simple xAPI Example</title>
  <script src="tincan-min.js"></script>
 </head>
 <body>
    <p>This is an xAPI Example</p>
    <button type="button" id="complete-button">Send Completion Statement</button>
    <span id="status"></span>
    <script>
        // xAPI configuration is sent in the URL query string parameters
        const urlParams = new URLSearchParams(window.location.search);

        // URL parameters for LRS connection
        const lrsConfig = {
            endpoint: urlParams.get('endpoint'),
            auth: urlParams.get('auth')
        };

        // URL parameters for statement data
        const statementTemplate = {
            actor: JSON.parse(urlParams.get('actor')),
            object: {
                id: urlParams.get('activity_id'),
                objectType: "Activity"
            },
            context: {
                registration: urlParams.get('registration')
            }
        };

        console.log(lrsConfig, statementTemplate);

        // LRS connection object
        const lrs = new TinCan.LRS(lrsConfig);

        // Statement to send on completion
        const completionStatement = new TinCan.Statement({
            ...statementTemplate,
            verb: {
                "id" : "http://adlnet.gov/expapi/verbs/completed",
                "display" : {
                    "de-DE" : "beendete",
                    "en-US" : "completed",
                    "fr-FR" : "a terminé",
                    "es-ES" : "completó"
                }
            },
            result: {
                "completion": true
            },
        });


        function handleCompleteButtonClick(event) {
            const button = this;
            const status = document.getElementById("status");

            status.innerHTML = "";

            button.disabled = true;

            // Send the completion statement on button click
            lrs.saveStatement(completionStatement, {
                callback: function (err, xhr) {
                    if (err) {
                        console.log("LRS Error:" + err);
                        console.log(xhr && xhr.responseText);
                        status.innerHTML = err;
                    } else {
                        status.innerHTML = "Completion statement sent!";
                    }
                    button.disabled = false;
                }
            });
        };
        const completeButton = document.getElementById("complete-button");
        completeButton.addEventListener("click", handleCompleteButtonClick);
    </script>
 </body>
</html>
	<html>
	<head>
	<title>Simple xAPI Example</title>
	<script src="tincan-min.js"></script>
	</head>
	<body>
	<p>This is an xAPI Example</p>
	<button type="button" id="complete-button">Send Completion Statement</button>
	<span id="status"></span>
	<script>
	// xAPI configuration is sent in the URL query string parameters
	const urlParams = new URLSearchParams(window.location.search);

	// URL parameters for LRS connection
	const lrsConfig = {
	endpoint: urlParams.get('endpoint'),
	auth: urlParams.get('auth')
	};

	// URL parameters for statement data
	const statementTemplate = {
	actor: JSON.parse(urlParams.get('actor')),
	object: {
	id: urlParams.get('activity_id'),
	objectType: "Activity"
	},
	context: {
	registration: urlParams.get('registration')
	}
	};

	console.log(lrsConfig, statementTemplate);

	// LRS connection object
	const lrs = new TinCan.LRS(lrsConfig);

	// Statement to send on completion
	const completionStatement = new TinCan.Statement({
	...statementTemplate,
	verb: {
	"id" : "http://adlnet.gov/expapi/verbs/completed",
	"display" : {
	"de-DE" : "beendete",
	"en-US" : "completed",
	"fr-FR" : "a terminé",
	"es-ES" : "completó"
	}
	},
	result: {
	"completion": true
	},
	});


	function handleCompleteButtonClick(event) {
	const button = this;
	const status = document.getElementById("status");

	status.innerHTML = "";

	button.disabled = true;

	// Send the completion statement on button click
	lrs.saveStatement(completionStatement, {
	callback: function (err, xhr) {
	if (err) {
	console.log("LRS Error:" + err);
	console.log(xhr && xhr.responseText);
	status.innerHTML = err;
	} else {
	status.innerHTML = "Completion statement sent!";
	}
	button.disabled = false;
	}
	});
	};
	const completeButton = document.getElementById("complete-button");
	completeButton.addEventListener("click", handleCompleteButtonClick);
	</script>
	</body>
	</html>