Master Prompt Interactive HTML5 Simulation Design for SLS HTML5

Overview

I want to create an interactive HTML5 simulation called [Insert Title], which models [Describe the simulation, e.g., magnetic field lines around a current-carrying wire]. The simulation should include the following features:

1. Interactivity & User Controls

A slider allowing the user to adjust [Variable, e.g., current from -5 to 5].
Real-time updates where [Describe dynamic elements, e.g., circular magnetic field lines that expand/shrink based on current].
Directional arrows on field lines following [Scientific principle, e.g., the Right-Hand Grip Rule].
Buttons for Play/Pause and Reset to control the simulation.
A score or progress tracker that updates dynamically based on user interaction.

2. xAPI Integration (Learning Management System - SLS)

Include xAPI tracking to record user interactions and send scores to the LMS.
Use xAPIWrapper.js to extract LMS parameters and send statements when a user completes an interaction.
Automatically fetch xAPI parameters when the page loads.
Call sendScore(score) at appropriate interaction points (e.g., when a user successfully adjusts the field strength or completes a challenge).
The xAPI integration should:
- Extract endpoint, auth, agent, stateId, and activityId from the LMS.
- Use ADL.XAPIWrapper.sendState() to send the score.
- Include the following code:

<script src="xapiwrapper.min.js"></script>
<script>
  // Using a namespace to prevent global variable clashes
  const XAPIUtils = {
    parameters: null, // Parameters store
    getParameters: function () {
      if (!this.parameters) { // Ensure fetch once
        var urlParams = new URLSearchParams(window.location.search);
        var endpoint = urlParams.get('endpoint');
        var auth = urlParams.get('auth');
        var agent = JSON.parse(urlParams.get('agent'));
        var stateId = urlParams.get('stateId');
        var activityId = urlParams.get('activityId');
        ADL.XAPIWrapper.changeConfig({"endpoint": endpoint + "/", "auth": `Basic ${auth}`});
        this.parameters = { agent, stateId, activityId };
      }
      return this.parameters;
    }
  };
  // Immediately invoke getParameters on page load
  document.addEventListener("DOMContentLoaded", function() { XAPIUtils.getParameters(); });
</script>
<script>
  function sendScore(score) {
    try {
      const parameters = XAPIUtils.getParameters(); // Retrieve parameters from store
      const activityid = parameters.activityId;
      const stateId = parameters.stateId;
      const agent = parameters.agent;
      const registration = null;
      const stateValue = { score: score };
      ADL.XAPIWrapper.sendState(activityid, agent, stateId, registration, stateValue);
    } catch (err) { console.error("An error has occurred!", err); }
  }
</script>

3. User Experience & Interface

The UI should be responsive, visually appealing, and structured using CSS Flexbox/Grid.
Mobile-friendly design, ensuring usability across screen sizes. The width and height should automatically adjust to fit the SLS iframe without requiring scrolling.
Provide clear visual feedback (e.g., field line changes, arrows updating dynamically).
An explanation section below the simulation describing [Concept, e.g., the Right-Hand Grip Rule] in simple terms.

4. Code Structure & Best Practices

Write clean, modular JavaScript with well-documented comments.
Use event listeners and DOM manipulation to update the UI dynamically.
Optimize performance using requestAnimationFrame for smooth animations.
Ensure accessibility with keyboard navigation, color contrast, and ARIA attributes.

5. Additional Enhancements

If applicable, store user preferences using LocalStorage.
Suggest additional interactive elements, such as zooming, different field densities, or color coding.
Follow best practices for modern web development.

6. Output Requirements

Generate the full HTML, CSS, and JavaScript code in a single file.
The file structure of the generated zip file should be:
- index.html
- xapiwrapper.min.js
Include the xAPI integration script (xapiwrapper.min.js).
Ensure the file is lightweight, efficient, and properly structured.
Embed sendScore(score) at the correct position (e.g., when a user successfully completes an interaction or task).
Provide clear comments to guide beginners through the implementation process.

G3 Science Example 1: fail in one try. GPTo3 high, Grok3, deepseek.

Image:

barMagnetGPT01fromJava.zip
barMagnetGPT01fromJava/

Overview

I want to create an interactive HTML5 simulation called bar magnet, which models magnetic field lines around the bar magnet. The simulation should include the following features:

1. Interactivity & User Controls

A slider allowing the user to adjust [strength of magnet from -5 to 5].

Real-time updates where [Describe dynamic elements, e.g., magnetic field lines that obey real physics equation].

Directional arrows on field lines following realistic physics equation].

Buttons for Play/Pause and Reset to control the simulation.

A score or progress tracker that updates dynamically based on user interaction.

2. xAPI Integration (Learning Management System - SLS)

Include xAPI tracking to record user interactions and send scores to the LMS.

Use xAPIWrapper.js to extract LMS parameters and send statements when a user completes an interaction.

Automatically fetch xAPI parameters when the page loads.

Call sendScore(score) at appropriate interaction points (e.g., when a user successfully adjusts the field strength or completes a challenge).

The xAPI integration should:

Extract endpoint, auth, agent, stateId, and activityId from the LMS.

Use ADL.XAPIWrapper.sendState() to send the score.

Include the following code:

// Using a namespace to prevent global variable clashes

const XAPIUtils = {

parameters: null, // Parameters store

getParameters: function () {

if (!this.parameters) { // Ensure fetch once

var urlParams = new URLSearchParams(window.location.search);

var endpoint = urlParams.get('endpoint');

var auth = urlParams.get('auth');

var agent = JSON.parse(urlParams.get('agent'));

var stateId = urlParams.get('stateId');

var activityId = urlParams.get('activityId');

ADL.XAPIWrapper.changeConfig({"endpoint": endpoint + "/", "auth": `Basic ${auth}`});

this.parameters = { agent, stateId, activityId };

}

return this.parameters;

}

};

// Immediately invoke getParameters on page load

document.addEventListener("DOMContentLoaded", function() { XAPIUtils.getParameters(); });

</script>

function sendScore(score) {

try {

const parameters = XAPIUtils.getParameters(); // Retrieve parameters from store

const activityid = parameters.activityId;

const stateId = parameters.stateId;

const agent = parameters.agent;

const registration = null;

const stateValue = { score: score };

ADL.XAPIWrapper.sendState(activityid, agent, stateId, registration, stateValue);

} catch (err) { console.error("An error has occurred!", err); }

}

</script>

3. User Experience & Interface

The UI should be responsive, visually appealing, and structured using CSS Flexbox/Grid.

Mobile-friendly design, ensuring usability across screen sizes. The width and height should automatically adjust to fit the SLS iframe without requiring scrolling.

Provide clear visual feedback (e.g., field line changes, arrows updating dynamically).

An explanation section below the simulation describing [Concept, e.g., the Right-Hand Grip Rule] in simple terms.

4. Code Structure & Best Practices

Write clean, modular JavaScript with well-documented comments.

Use event listeners and DOM manipulation to update the UI dynamically.

Optimize performance using requestAnimationFrame for smooth animations.

Ensure accessibility with keyboard navigation, color contrast, and ARIA attributes.

5. Additional Enhancements

If applicable, store user preferences using LocalStorage.

Suggest additional interactive elements, such as zooming, different field densities, or color coding.

Follow best practices for modern web development.

6. Output Requirements

Generate the full HTML, CSS, and JavaScript code in a single file.

The file structure of the generated zip file should be:

index.html

xapiwrapper.min.js

Include the xAPI integration script (xapiwrapper.min.js).

Ensure the file is lightweight, efficient, and properly structured.

Embed sendScore(score) at the correct position (e.g., when a user successfully completes an interaction or task).

Provide clear comments to guide beginners through the implementation process.

G1 Science Example 2: Works on first try, suitable for SLS HTML5 generator

image:

https://iwant2study.org/lookangejss/biology/plant/plantwithdrawing.html

plantwithdrawing.html.zip to upload to SLS

Create an interactive plant growth simulation using HTML and JavaScript. The simulation should include the following features:

A combobox for selecting between two soil types: "Soil A" and "Soil B".

A slider for adjusting the time in weeks, ranging from 0 to 6.

A display area that shows the height of the plant in centimeters for the selected soil type at the selected time.

The data for the plant heights at different times in weeks is as follows:

Data:

Time (weeks): 0, 1, 2, 3, 4, 5, 6

Soil A (cm): 0.00, 0.80, 1.60, 2.20, 3.40, 3.75, 4.50

Soil B (cm): 0.00, 0.45, 0.80, 1.00, 1.60, 2.20, 2.50

Requirements:

When a soil type is selected from the combobox, only the height of the plant for that soil type should be displayed.

The slider should allow the user to select a time (in weeks), and the display should update to show the corresponding plant height for the selected soil type.

The initial values should be set to time = 0 weeks and soil type = "Soil A".

2. xAPI Integration (Learning Management System - SLS)

Include xAPI tracking to record user interactions and send scores to the LMS.
Use xAPIWrapper.js to extract LMS parameters and send statements when a user completes an interaction.
Automatically fetch xAPI parameters when the page loads.
Call sendScore(score) at appropriate interaction points (e.g., when a user successfully adjusts the field strength or completes a challenge).
The xAPI integration should:
- Extract endpoint, auth, agent, stateId, and activityId from the LMS.
- Use ADL.XAPIWrapper.sendState() to send the score.
- Include the following code:

<script src="xapiwrapper.min.js"></script>
<script>
  // Using a namespace to prevent global variable clashes
  const XAPIUtils = {
    parameters: null, // Parameters store
    getParameters: function () {
      if (!this.parameters) { // Ensure fetch once
        var urlParams = new URLSearchParams(window.location.search);
        var endpoint = urlParams.get('endpoint');
        var auth = urlParams.get('auth');
        var agent = JSON.parse(urlParams.get('agent'));
        var stateId = urlParams.get('stateId');
        var activityId = urlParams.get('activityId');
        ADL.XAPIWrapper.changeConfig({"endpoint": endpoint + "/", "auth": `Basic ${auth}`});
        this.parameters = { agent, stateId, activityId };
      }
      return this.parameters;
    }
  };
  // Immediately invoke getParameters on page load
  document.addEventListener("DOMContentLoaded", function() { XAPIUtils.getParameters(); });
</script>
<script>
  function sendScore(score) {
    try {
      const parameters = XAPIUtils.getParameters(); // Retrieve parameters from store
      const activityid = parameters.activityId;
      const stateId = parameters.stateId;
      const agent = parameters.agent;
      const registration = null;
      const stateValue = { score: score };
      ADL.XAPIWrapper.sendState(activityid, agent, stateId, registration, stateValue);
    } catch (err) { console.error("An error has occurred!", err); }
  }
</script>

3. User Experience & Interface

The UI should be responsive, visually appealing, and structured using CSS Flexbox/Grid.
Mobile-friendly design, ensuring usability across screen sizes. The width and height should automatically adjust to fit the SLS iframe without requiring scrolling.
Provide clear visual feedback (e.g., field line changes, arrows updating dynamically).
An explanation section below the simulation describing [Concept, e.g., the Right-Hand Grip Rule] in simple terms.

4. Code Structure & Best Practices

Write clean, modular JavaScript with well-documented comments.
Use event listeners and DOM manipulation to update the UI dynamically.
Optimize performance using requestAnimationFrame for smooth animations.
Ensure accessibility with keyboard navigation, color contrast, and ARIA attributes.

5. Additional Enhancements

If applicable, store user preferences using LocalStorage.
Suggest additional interactive elements, such as zooming, different field densities, or color coding.
Follow best practices for modern web development.

6. Output Requirements

Generate the full HTML, CSS, and JavaScript code in a single file.
The file structure of the generated zip file should be:
- index.html
- xapiwrapper.min.js
Include the xAPI integration script (xapiwrapper.min.js).
Ensure the file is lightweight, efficient, and properly structured.
Embed sendScore(score) at the correct position (e.g., when a user successfully completes an interaction or task).
Provide clear comments to guide beginners through the implementation process.

AI HTML5, Open Source Physics (Easy JavaScript Simulation and Tracker) and TagUI (AI-Singapore)

Pages

Tuesday, March 4, 2025