Adding Support for Scorm

PyAr · Aug 2, 2024 · 979652b · 979652b
1 parent 912c7df
commit 979652b
Show file tree

Hide file tree

Showing 6 changed files with 171 additions and 1 deletion.
diff --git a/_sources/lectures/TWP52_en.rst b/_sources/lectures/TWP52_en.rst
@@ -305,7 +305,8 @@ Review
 + OptionMenu()
 
 
-
+.. raw:: html
+    :file: ../../scorm_package/index.html
 
 .. disqus::
    :shortname: pyzombis

diff --git a/_templates/layout.html b/_templates/layout.html
@@ -275,6 +275,8 @@
     {% endraw %}
 {% endif %}
 
+<script src="../scorm_package/scripts/scorm_functions.js"></script>
+
 {% endblock %}
 
 {# Silence the sidebar's, relbar's #}

diff --git a/scorm_package/imsmanifest.xml b/scorm_package/imsmanifest.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<manifest identifier="com.example.scorm" version="1.2">
+    <metadata>
+        <schema>ADL SCORM</schema>
+        <schemaversion>1.2</schemaversion>
+    </metadata>
+    <organizations default="ORG1">
+        <organization identifier="ORG1">
+            <title>SCORM Course</title>
+            <item identifier="ITEM1" identifierref="RES1">
+                <title>Lesson 1</title>
+            </item>
+        </organization>
+    </organizations>
+    <resources>
+        <resource identifier="RES1" type="webcontent" href="index.html">
+            <file href="index.html"/>
+            <file href="scripts/scorm_functions.js"/>
+        </resource>
+    </resources>
+</manifest>
diff --git a/scorm_package/index.html b/scorm_package/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>SCORM Course</title>
+
+    <style>
+        .center {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 10vh; /* Optional: to center vertically within the viewport */
+        }
+    </style>
+</head>
+<body>
+    <h1>Welcome to the SCORM Course</h1>
+    <p id="studentName"></p>
+    <div class="center">
+        <button onclick="completeLesson()">Complete Lesson</button>
+    </div>
+    <script>
+        window.onload = function() {
+            initialize().then(() => {
+                scorm.getValue("cmi.core.student_name").then(studentName => {
+                    document.getElementById("studentName").innerText = "Student Name: " + studentName;
+                });
+            });
+        };
+    </script>
+    <script src="scripts/scorm_functions.js"></script>
+</body>
+</html>
diff --git a/scorm_package/scripts/scorm_functions.js b/scorm_package/scripts/scorm_functions.js
@@ -0,0 +1,76 @@
+var scorm = pipwerks.SCORM;
+scorm.version = "1.2";
+
+function initialize() {
+    return new Promise((resolve, reject) => {
+        var result = scorm.init();
+        if (result) {
+            console.log("SCORM initialized");
+            resolve();
+        } else {
+            console.log("SCORM initialization failed");
+            reject();
+        }
+    });
+}
+
+function completeLesson() {
+    console.log("Complete Lesson button clicked");
+    scorm.setValue("cmi.core.lesson_status", "completed").then(() => {
+        fetch('/LMSSetValue', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ element: "cmi.core.lesson_status", value: "completed" }),
+        })
+        .then(response => response.json())
+        .then(data => {
+            console.log('Success:', data);
+        })
+        .catch((error) => {
+            console.error('Error:', error);
+        });
+    });
+}
+
+scorm.setValue = function(element, value) {
+    return new Promise((resolve, reject) => {
+        fetch('/LMSSetValue', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ element: element, value: value }),
+        })
+        .then(response => {
+            if (response.ok) {
+                resolve();
+            } else {
+                reject();
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            reject();
+        });
+    });
+};
+
+scorm.getValue = function(element) {
+    return new Promise((resolve, reject) => {
+        fetch(`/LMSGetValue?element=${element}`)
+        .then(response => response.json())
+        .then(data => {
+            resolve(data[element]);
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            reject();
+        });
+    });
+};
+
+// Expose functions to global scope
+window.completeLesson = completeLesson;
+window.initialize = initialize;
diff --git a/scorm_package/server.py b/scorm_package/server.py
@@ -0,0 +1,38 @@
+from flask import Flask, request, jsonify
+
+app = Flask(__name__)
+
+# Dummy storage for demonstration
+scorm_data = {
+    "student_name": "John Doe",  # Example student name
+    "lesson_status": "",
+    "lesson_location": ""
+}
+
+@app.route('/LMSInitialize', methods=['GET'])
+def initialize():
+    print("SCORM initialized")
+    return 'true', 200
+
+@app.route('/LMSGetValue', methods=['GET'])
+def get_value():
+    element = request.args.get('element')
+    print(f"Getting value for: {element}")
+    return jsonify({element: scorm_data.get(element, '')})
+
+@app.route('/LMSSetValue', methods=['POST'])
+def set_value():
+    data = request.get_json()
+    element = data.get('element')
+    value = data.get('value')
+    scorm_data[element] = value
+    print(f"Set {element} to {value}")
+    return 'true', 200
+
+@app.route('/LMSFinish', methods=['GET'])
+def finish():
+    print("SCORM finished")
+    return 'true', 200
+
+if __name__ == '__main__':
+    app.run(debug=True)