src/index.html

<!DOCTYPE html>
<html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
    />
    <title>pie-demo</title>
    <link type="text/css" rel="stylesheet" href="/assets/docson.css" />
    <script type="module" src="/build/pie-demo.esm.js"></script>
    <script nomodule src="/build/pie-demo.js"></script>
  </head>

  <body>
    <pie-demo
      id="demo"
      editor="true"
      pie="@pie-element/math-inline@latest"
    ></pie-demo>

    <script>
      const model = (id, element) => ({
        id,
        element,
        equationEditor: 'geometry',
        responseType: 'Advanced Multi',
        expression: '{{response}}',
        responses: [
          {
            allowSpaces: true,
            answer: '1',
            id: '1',
            alternates: {},
            validation: 'symbolic'
          }
        ],
      });
      const configure = {
        answerChoiceCount: 4,
        addChoiceButton: {
          settings: true,
          label: 'Add Choice'
        },
        choiceMode: {
          settings: false,
          label: 'Response Type'
        },
        lockChoiceOrder: {
          settings: true,
          label: 'Lock Choice Order'
        },
        partialScoring: {
          settings: false,
          label: 'Allow Partial Scoring'
        },
        choicePrefix: {
          settings: true,
          label: 'Choice Labels'
        },
        deleteChoice: {
          settings: true
        },
        feedback: {
          settings: false,
          label: 'Student Feedback'
        },
        prompt: {
          settings: true,
          label: 'Item Stem'
        },
        rationale: {
          settings: true,
          label: 'Rationale'
        },
        studentInstructions: {
          settings: false,
          label: 'Student Instructions'
        },
        teacherInstructions: {
          settings: true,
          label: 'Teacher Instructions'
        }
      };
      const pieDemo = document.querySelector("pie-demo");
      pieDemo.model = model("1", "pie-element-multiple-choice");

      pieDemo.configure = configure;
      pieDemo.configureSchemaJSONURI =
        "https://raw.githubusercontent.com/pie-framework/pie-elements/develop/packages/categorize/docs/config-schema.json";
      pieDemo.modelSchemaJSONURI =
        "https://raw.githubusercontent.com/pie-framework/pie-elements/develop/packages/categorize/docs/pie-schema.json";
    </script>
  </body>
</html>