From 4f4978051e8bdf9b59e69a7898a5bdb75a97547d Mon Sep 17 00:00:00 2001
From: Mikhail Loginov <mloginov@codio.com>
Date: Tue, 12 May 2026 14:45:54 +0100
Subject: [PATCH 1/4] setting and assessment rendering

---
 icon.svg      |  13 ++++
 index.css     |   4 ++
 index.html    |  23 +++++++
 index.js      | 179 ++++++++++++++++++++++++++++++++++++++++++++++++++
 metadata.json |  12 ++++
 settings.css  |   0
 settings.html |  24 +++++++
 settings.js   |  39 +++++++++++
 8 files changed, 294 insertions(+)
 create mode 100644 icon.svg
 create mode 100644 index.css
 create mode 100644 index.html
 create mode 100644 index.js
 create mode 100644 metadata.json
 create mode 100644 settings.css
 create mode 100644 settings.html
 create mode 100644 settings.js

diff --git a/icon.svg b/icon.svg
new file mode 100644
index 0000000..7d91044
--- /dev/null
+++ b/icon.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="50" height="50" version="1.1" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
+ <rect x="2" y="14" width="46" height="34" fill="#259999" stroke-width=".92"/>
+ <rect x="4" y="16" width="42" height="30" fill="#f3f3da" stroke-width="10.4" style="paint-order:stroke fill markers"/>
+ <g fill="#255f99">
+  <path transform="scale(1.01 .99)" d="m5.69 2.02c-0.711 0-1.32 0.107-1.82 0.321-0.5 0.214-0.886 0.529-1.15 0.941-0.265 0.408-0.397 0.846-0.397 1.32 0 0.732 0.283 1.35 0.851 1.86 0.404 0.362 1.11 0.667 2.11 0.915 0.778 0.193 1.28 0.329 1.5 0.404 0.32 0.114 0.541 0.247 0.667 0.402 0.13 0.151 0.195 0.337 0.195 0.556 0 0.341-0.153 0.639-0.46 0.895-0.303 0.252-0.754 0.379-1.36 0.379-0.568 0-1.02-0.144-1.36-0.43-0.332-0.286-0.554-0.733-0.663-1.34l-1.82 0.177c0.122 1.03 0.497 1.82 1.12 2.36 0.627 0.538 1.52 0.809 2.69 0.809 0.803 0 1.48-0.112 2.01-0.335 0.538-0.227 0.955-0.571 1.25-1.03 0.294-0.463 0.441-0.959 0.441-1.49 0-0.585-0.125-1.08-0.373-1.47-0.244-0.4-0.584-0.712-1.02-0.939-0.433-0.231-1.1-0.454-2.01-0.669s-1.48-0.422-1.72-0.619c-0.185-0.156-0.277-0.343-0.277-0.562 0-0.24 0.0983-0.431 0.296-0.574 0.307-0.223 0.732-0.333 1.27-0.333 0.526 0 0.919 0.105 1.18 0.316 0.265 0.206 0.437 0.546 0.516 1.02l1.87-0.0828c-0.0294-0.85-0.34-1.53-0.928-2.04-0.585-0.509-1.46-0.763-2.62-0.763zm29.5 0c-1.3 0-2.34 0.426-3.14 1.28-0.795 0.85-1.19 2.04-1.19 3.58 0 1.46 0.395 2.6 1.19 3.45 0.791 0.837 1.8 1.26 3.03 1.26 0.993 0 1.81-0.246 2.45-0.734 0.648-0.492 1.11-1.24 1.39-2.25l-1.81-0.574c-0.156 0.677-0.412 1.17-0.77 1.49-0.357 0.315-0.784 0.473-1.28 0.473-0.673 0-1.22-0.247-1.64-0.744-0.421-0.496-0.631-1.33-0.631-2.5 0-1.1 0.212-1.9 0.636-2.39 0.429-0.492 0.986-0.74 1.67-0.74 0.496 0 0.918 0.139 1.26 0.416 0.349 0.278 0.577 0.657 0.687 1.14l1.85-0.442c-0.21-0.74-0.525-1.31-0.946-1.7-0.707-0.669-1.63-1-2.76-1zm-24.1 0.158v9.25h1.87v-3.49h1.22c0.845 0 1.49-0.0458 1.94-0.134 0.328-0.0715 0.65-0.215 0.965-0.434 0.32-0.223 0.583-0.528 0.789-0.915s0.309-0.864 0.309-1.43c0-0.736-0.178-1.34-0.536-1.8-0.357-0.467-0.803-0.77-1.33-0.909-0.345-0.0925-1.08-0.138-2.22-0.138h-3zm16.5 0v9.25h1.87v-9.25h-1.87zm13 0v9.25h7.03v-1.56h-5.17v-2.52h4.64v-1.56h-4.64v-2.05h4.99v-1.56h-6.86zm-20.8 0.0749v9.17h6.51v-1.56h-4.64v-7.61h-1.87zm-6.8 1.49h0.903c0.673 0 1.12 0.0211 1.34 0.0631 0.303 0.0547 0.553 0.192 0.75 0.41 0.198 0.219 0.296 0.496 0.296 0.832 0 0.273-0.0717 0.514-0.215 0.72-0.139 0.206-0.332 0.357-0.58 0.454-0.248 0.0967-0.74 0.146-1.48 0.146h-1.02v-2.62z" stroke-width="10.3" style="paint-order:stroke fill markers"/>
+  <g stroke-width=".108">
+   <path transform="translate(-.000438 -3)" d="m18.2 29.1c-0.165-0.0069-0.343 0.0166-0.527 0.0781l-6.49 2.16c-0.897 0.299-1.37 1.07-1.37 1.84 0 0.766 0.474 1.54 1.37 1.84l6.49 2.16c0.738 0.246 1.36-0.109 1.53-0.629 0.174-0.52-0.107-1.18-0.846-1.42l-5.84-1.95 5.84-1.95c0.738-0.246 1.02-0.902 0.846-1.42-0.13-0.39-0.51-0.686-1-0.707z"/>
+   <path transform="translate(-.000438 -3)" d="m27.7 24.7c-0.41 0.0399-0.821 0.331-1 0.881l-5.41 16.2c-0.244 0.733 0.108 1.34 0.621 1.51s1.16-0.103 1.41-0.836l5.41-16.2c0.244-0.733-0.107-1.34-0.621-1.52-0.128-0.0428-0.266-0.0563-0.402-0.043z"/>
+   <path transform="matrix(-1 0 0 1 50 -3)" d="m18.2 29.1c-0.165-0.0069-0.343 0.0166-0.527 0.0781l-6.49 2.16c-0.897 0.299-1.37 1.07-1.37 1.84 0 0.766 0.474 1.54 1.37 1.84l6.49 2.16c0.738 0.246 1.36-0.109 1.53-0.629 0.174-0.52-0.107-1.18-0.846-1.42l-5.84-1.95 5.84-1.95c0.738-0.246 1.02-0.902 0.846-1.42-0.13-0.39-0.51-0.686-1-0.707z"/>
+  </g>
+ </g>
+</svg>
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..cbd12ad
--- /dev/null
+++ b/index.css
@@ -0,0 +1,4 @@
+.codio-assessment-splice-iframe {
+  height: auto;
+  width: 100%;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4949caf
--- /dev/null
+++ b/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>SPLICE assessment</title>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/cash/8.1.5/cash.min.js"></script>
+  <link type="text/css" rel="stylesheet" href="./index.css">
+  <link type="text/css" rel="stylesheet" href="../assessment-common/assessment.css">
+  <script type="text/javascript" src="../assessment-common/helper.js"></script>
+</head>
+<body>
+  <div class="codio-assessment hide">
+    <h3 class="codio-assessment-name"></h3>
+    <div class="codio-assessment-content">
+      <div class='codio-assessment-instructions'>
+        <div class='instructions-text'></div>
+      </div>
+    </div>
+    <div class="codio-assessment-iframe-wrapper"></div>
+  </div>
+  <script defer type="text/javascript" src="./index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..5404f67
--- /dev/null
+++ b/index.js
@@ -0,0 +1,179 @@
+(function (){
+  let assessmentOptions = null
+  let assessment = null
+  let processing = false
+  let currentData = null
+
+  const SPLICE_METHODS = {
+    REPORT_SCORE_AND_STATE: 'SPLICE.reportScoreAndState',
+    GET_STATE: 'SPLICE.getState',
+    GET_STATE_RESPONSE: 'SPLICE.getState.response',
+    FRAME_RESIZE: 'lti.frameResize',
+  }
+
+  const updateProcessing = (status) => {
+    processing = status
+  }
+
+  const applyStateInitial = (data) => {
+    const {state, result, ...dataWithoutState} = data
+    assessment = dataWithoutState.assessment
+    assessmentOptions = dataWithoutState.options
+
+    render()
+  }
+
+  const applyState = (data) => {
+    console.log('assessment iframe applyState', data)
+    currentData = data
+    if (!assessment) {
+      applyStateInitial(data)
+    }
+    // todo sent set state to iframe??
+  }
+
+  const renderContent = () => {
+    $('.instructions-text').html(assessment.source.settings.instructions)
+    const iframe = $(`<iframe class="codio-assessment-splice-iframe" />`)
+    iframe.attr('title', `Assessment - ${assessment.source.name}`)
+    iframe.attr('src', assessment.source.settings.url)
+    $('.codio-assessment-iframe-wrapper').append(iframe)
+  }
+
+  const bindEvents = () => {
+    window.codioAssessmentsHelper.addBodyHeightListener()
+  }
+
+  const render = () => {
+    const container = $('.codio-assessment')
+    const nameEl = container.find('.codio-assessment-name')
+    assessment.source.showName ? nameEl.text(assessment.source.name) : nameEl.remove()
+    renderContent()
+    bindEvents()
+    container.removeClass('hide')
+  }
+
+  const sendToIframe = (method, message) => {
+    const iframe = $('.codio-assessment-splice-iframe')
+    iframe.contentWindow.postMessage({subject: method, ...message}, '*')
+  }
+
+  const getStateObj = () => {
+    const {result} = currentData || {}
+    if (!result?.stateJson) {
+      return null
+    }
+
+    try {
+      return JSON.parse(result.stateJson)
+    } catch {
+      return null
+    }
+  }
+
+  const sendStateToIframe = (messageId) => {
+    if (!messageId) {
+      return
+    }
+
+    sendToIframe(
+      SPLICE_METHODS.GET_STATE_RESPONSE, {
+        message_id: messageId,
+        state: getStateObj()
+      }
+    )
+  }
+
+  const reportScoreAndState = ({score, state}) => {
+    if (processing) {
+      return
+    }
+    updateProcessing(true)
+    window.codioAssessmentsHelper.send(
+      window.codioAssessmentsHelper.METHODS.SUBMIT_ANSWER,
+      {result: {score, state}}
+    )
+  }
+
+  const resizeIframe = ({width, height}) => {
+    const iframe = $('.codio-assessment-splice-iframe')
+    iframe.width(width || '100%').height(height || 'auto')
+  }
+
+  const sendGetFileContent = async (data) => {
+    const messageId = data.message_id || window.codioAssessmentsHelper.GUID()
+    try {
+      const result = await window.codioAssessmentsHelper.sendAndWait(
+        window.codioAssessmentsHelper.METHODS.GET_FILE_CONTENT, data
+      )
+      sendToIframe(
+        window.codioAssessmentsHelper.METHODS.CODIO_GET_FILE_CONTENT_RESPONSE,
+        {message_id: messageId, content: result.content}
+      )
+    } catch (err) {
+      sendToIframe(
+        window.codioAssessmentsHelper.METHODS.CODIO_GET_FILE_CONTENT_RESPONSE,
+        {message_id: messageId, error: err.message}
+      )
+    }
+  }
+
+  const sendSetFileContent = async (data) => {
+    const messageId = data.message_id || window.codioAssessmentsHelper.GUID()
+    try {
+      await window.codioAssessmentsHelper.sendAndWait(
+        window.codioAssessmentsHelper.METHODS.SET_FILE_CONTENT, data
+      )
+      sendToIframe(
+        window.codioAssessmentsHelper.METHODS.CODIO_SET_FILE_CONTENT_RESPONSE,
+        {message_id: messageId}
+      )
+    } catch (err) {
+      sendToIframe(
+        window.codioAssessmentsHelper.METHODS.CODIO_SET_FILE_CONTENT_RESPONSE,
+        {message_id: messageId, error: err.message}
+      )
+    }
+  }
+
+  const processMessage = (jsonData) => {
+    try {
+      const {method, data} = JSON.parse(jsonData)
+      console.log('assessment iframe processMessage', jsonData, method, data)
+      switch (method) {
+        case window.codioAssessmentsHelper.METHODS.GET_STYLES_RESPONSE:
+          window.codioAssessmentsHelper.addStyle(data.css)
+          break
+        case window.codioAssessmentsHelper.METHODS.GET_STATE_RESPONSE:
+          updateProcessing(false)
+          applyState(data)
+          break
+        case window.codioAssessmentsHelper.METHODS.CALLBACK: {
+          window.codioAssessmentsHelper.processCallback(data)
+          break
+        }
+        case SPLICE_METHODS.GET_STATE:
+          sendStateToIframe(data.message_id)
+          break
+        case SPLICE_METHODS.REPORT_SCORE_AND_STATE:
+          reportScoreAndState(data)
+          break
+        case SPLICE_METHODS.FRAME_RESIZE:
+          resizeIframe(data)
+          break
+        case window.codioAssessmentsHelper.METHODS.CODIO_GET_FILE_CONTENT:
+          sendGetFileContent(data)
+          break
+        case window.codioAssessmentsHelper.METHODS.CODIO_SET_FILE_CONTENT:
+          sendSetFileContent(data)
+          break
+      }
+    } catch {}
+  }
+
+  window.addEventListener('load', () => {
+    window.codioAssessmentsHelper.registerMessageListener(processMessage)
+    window.codioAssessmentsHelper.send(window.codioAssessmentsHelper.METHODS.GET_STATE)
+    window.codioAssessmentsHelper.send(window.codioAssessmentsHelper.METHODS.GET_STYLES)
+  })
+})()
diff --git a/metadata.json b/metadata.json
new file mode 100644
index 0000000..9820b47
--- /dev/null
+++ b/metadata.json
@@ -0,0 +1,12 @@
+{
+  "name": "Splice",
+  "type": "assessment",
+  "properties": {
+    "type": "splice",
+    "icon": "./icon.svg",
+    "gradingControls": {
+      "points": true,
+      "useMaximumScore": true
+    }
+  }
+}
diff --git a/settings.css b/settings.css
new file mode 100644
index 0000000..e69de29
diff --git a/settings.html b/settings.html
new file mode 100644
index 0000000..1a1a459
--- /dev/null
+++ b/settings.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Settings</title>
+  <link type="text/css" rel="stylesheet" href="../assessment-common/settings.css">
+  <link rel="stylesheet" href="./settings.css">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/cash/8.1.5/cash.min.js"></script>
+  <script type="text/javascript" src="../assessment-common/helper.js"></script>
+  <script type="text/javascript" src="./settings.js"></script>
+</head>
+<body>
+<div id="settings-content" class="codio-assessment-settings-content">
+  <div class="codio-assessment-settings-form-control codio-assessment-settings-form-input-container">
+    <label for="instructions" class="codio-assessment-settings-form-label">Instructions</label>
+    <textarea id="instructions" name="instructions" rows="4" class="codio-assessment-settings-form-input"></textarea>
+  </div>
+  <div class="codio-assessment-settings-form-control codio-assessment-settings-form-input-container">
+    <label for="url" class="codio-assessment-settings-form-label">Assessment Url</label>
+    <input id="url" name="url" class="codio-assessment-settings-form-input" type="text"/>
+  </div>
+</div>
+</body>
+</html>
diff --git a/settings.js b/settings.js
new file mode 100644
index 0000000..b6a06c3
--- /dev/null
+++ b/settings.js
@@ -0,0 +1,39 @@
+(function () {
+  const collectSettings = () => {
+    const instructions = $('#instructions').val()
+    const url = $('#url').val()
+    return {instructions, url};
+  }
+
+  const exportSettings = () => {
+    const data = collectSettings();
+    window.codioAssessmentsHelper.send(window.codioAssessmentsHelper.METHODS.EXPORT_SETTINGS_RESPONSE, data);
+  }
+
+  const applySettings = (settings = {}) => {
+    $('#instructions').val(settings.instructions || '');
+    $('#url').val(settings.url || '');
+  }
+
+  const processMessage = (jsonData) => {
+    console.log('settings iframe processMessage', jsonData)
+    try {
+      const {method, data} = JSON.parse(jsonData);
+      switch (method) {
+        case window.codioAssessmentsHelper.METHODS.EXPORT_SETTINGS:
+          exportSettings();
+          break;
+        case window.codioAssessmentsHelper.METHODS.GET_SETTINGS_RESPONSE:
+          applySettings(data.settings);
+          break;
+      }
+    } catch {}
+  }
+
+  const onLoad = async () => {
+    window.codioAssessmentsHelper.registerMessageListener(processMessage)
+    window.codioAssessmentsHelper.send(window.codioAssessmentsHelper.METHODS.GET_SETTINGS)
+  }
+
+  window.addEventListener('load', onLoad);
+})()

From e23623b50d56a1ae3aa3baf110301de7f9748dbe Mon Sep 17 00:00:00 2001
From: Mikhail Loginov <mloginov@codio.com>
Date: Wed, 13 May 2026 10:20:21 +0100
Subject: [PATCH 2/4] fixed splice event listener

---
 index.css |  1 +
 index.js  | 10 +++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/index.css b/index.css
index cbd12ad..0d51309 100644
--- a/index.css
+++ b/index.css
@@ -1,4 +1,5 @@
 .codio-assessment-splice-iframe {
   height: auto;
   width: 100%;
+  max-width: 100%;
 }
diff --git a/index.js b/index.js
index 5404f67..6bf3899 100644
--- a/index.js
+++ b/index.js
@@ -136,9 +136,17 @@
     }
   }
 
+  const getSpliceData = (data) => {
+    if (!data?.subject) {
+      return null
+    }
+    const {subject, ...rest} = data
+    return {method: subject, data: {...rest}}
+  }
+
   const processMessage = (jsonData) => {
     try {
-      const {method, data} = JSON.parse(jsonData)
+      const {method, data} = getSpliceData(jsonData) || JSON.parse(jsonData)
       console.log('assessment iframe processMessage', jsonData, method, data)
       switch (method) {
         case window.codioAssessmentsHelper.METHODS.GET_STYLES_RESPONSE:

From 56e60d14f7de4b61bbb024d3eeef19a67084d34a Mon Sep 17 00:00:00 2001
From: Mikhail Loginov <mloginov@codio.com>
Date: Wed, 13 May 2026 15:52:42 +0100
Subject: [PATCH 3/4] update classes

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 4949caf..e37dbcc 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
   <script type="text/javascript" src="../assessment-common/helper.js"></script>
 </head>
 <body>
-  <div class="codio-assessment hide">
+  <div class="codio-assessment codio-assessment-splice hide">
     <h3 class="codio-assessment-name"></h3>
     <div class="codio-assessment-content">
       <div class='codio-assessment-instructions'>

From a87d2d87417ec0b3aee8020252143c08c0ea48df Mon Sep 17 00:00:00 2001
From: Mikhail Loginov <mloginov@codio.com>
Date: Thu, 14 May 2026 15:11:22 +0100
Subject: [PATCH 4/4] fixed send events to splice iframe

---
 index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.js b/index.js
index 6bf3899..6d8eeb1 100644
--- a/index.js
+++ b/index.js
@@ -55,7 +55,7 @@
 
   const sendToIframe = (method, message) => {
     const iframe = $('.codio-assessment-splice-iframe')
-    iframe.contentWindow.postMessage({subject: method, ...message}, '*')
+    iframe[0].contentWindow.postMessage({subject: method, ...message}, '*')
   }
 
   const getStateObj = () => {