Help with HTML5/JavaScript interactive score

Hi all, I’m a composer who is a novice programmer and I’m trying to make a sort of interactive score work. It would be a webpage on Wix that hosts HTML5 code and works with JavaScript. Right now, I have the code needed to make a simple quiz like game where you would select certain aspects of the score that you’d like there, as well as the code for a drag and drop type of game in order to arrange a certain set of measures of music in whatever order the “player” would like.

My question is split into two parts. The first is how I would go about making it so the graphics of the score are saved into the background, and if there is a way to export it as a printable image at the end of the game. The second would be if there would be a way to generate a playable audio file at the end of the game, based on that image. I was thinking that a Max patch could do the job, but am unsure how to implement it exactly. Any help with either of these questions would be greatly appreciated!

This might save you lots of agony:

<!doctype html>

  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
#gate {
  cursor: pointer;
  margin-bottom: 100px;
  width: 83px;
  height: 46px;

#ball {
  cursor: pointer;
  width: 40px;
  height: 40px;


  <p>Drag the ball.</p>

  <img src="" id="gate" class="droppable">

  <img src="" id="ball">

    let currentDroppable = null;

    ball.onmousedown = function(event) {

      let shiftX = event.clientX - ball.getBoundingClientRect().left;
      let shiftY = event.clientY - ball.getBoundingClientRect().top; = 'absolute'; = 1000;

      moveAt(event.pageX, event.pageY);

      function moveAt(pageX, pageY) { = pageX - shiftX + 'px'; = pageY - shiftY + 'px';

      function onMouseMove(event) {
        moveAt(event.pageX, event.pageY);

        ball.hidden = true;
        let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
        ball.hidden = false;

        if (!elemBelow) return;

        let droppableBelow = elemBelow.closest('.droppable');
        if (currentDroppable != droppableBelow) {
          if (currentDroppable) { // null when we were not over a droppable before this event
          currentDroppable = droppableBelow;
          if (currentDroppable) { // null if we're not coming over a droppable now
            // (maybe just left the droppable)

      document.addEventListener('mousemove', onMouseMove);

      ball.onmouseup = function() {
        document.removeEventListener('mousemove', onMouseMove);
        ball.onmouseup = null;


    function enterDroppable(elem) { = 'pink';

    function leaveDroppable(elem) { = '';

    ball.ondragstart = function() {
      return false;


Plz show your end result ,

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.