fm100Test.html

<script src="https://SortableJS.github.io/Sortable/Sortable.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<hr>
<div>
  <section class="hue-container container-1">
    <div data-position="1" class="hue-box mr-0-fm-01" style="margin-right:5px"> </div>
    <div id="row1">
      <div data-position="2" class="hue-box mr-1-fm-02"> </div>
      <div data-position="3" class="hue-box mr-2-fm-03"> </div>
      <div data-position="4" class="hue-box mr-3-fm-04"> </div>
      <div data-position="5" class="hue-box mr-4-fm-05"> </div>
      <div data-position="6" class="hue-box mr-5-fm-06"> </div>
      <div data-position="7" class="hue-box mr-6-fm-07"> </div>
      <div data-position="8" class="hue-box mr-7-fm-08"> </div>
      <div data-position="9" class="hue-box mr-8-fm-09"> </div>
      <div data-position="10" class="hue-box mr-9-fm-10"> </div>
      <div data-position="11" class="hue-box mr-a-fm-11"> </div>
      <div data-position="12" class="hue-box mr-b-fm-12"> </div>
      <div data-position="13" class="hue-box mr-c-FM-13"> </div>
      <div data-position="14" class="hue-box mr-d-FM-14"> </div>
      <div data-position="15" class="hue-box mr-e-FM-15"> </div>
      <div data-position="16" class="hue-box mr-f-FM-16"> </div>
      <div data-position="17" class="hue-box mr-g-FM-17"> </div>
      <div data-position="18" class="hue-box mr-h-FM-18"> </div>
      <div data-position="19" class="hue-box mr-i-FM-19"> </div>
      <div data-position="20" class="hue-box mr-j-FM-20"> </div>
      <div data-position="21" class="hue-box mr-k-FM-21"> </div>
    </div>
    <div data-position="22" class="hue-box mr-l-FM-22" style="margin-left:5px"> </div>
  </section>

  <section class="hue-container container-2">
    <div data-position="22" class="hue-box mr-l-FM-22" style="margin-right:5px"> </div>
    <div id="row2">
      <div data-position="23" class="hue-box mr-m-FM-23"> </div>
      <div data-position="24" class="hue-box mr-n-FM-24"> </div>
      <div data-position="25" class="hue-box mr-o-FM-25"> </div>
      <div data-position="26" class="hue-box mr-p-FM-26"> </div>
      <div data-position="27" class="hue-box mr-q-FM-27"> </div>
      <div data-position="28" class="hue-box mr-r-FM-28"> </div>
      <div data-position="29" class="hue-box mr-s-FM-29"> </div>
      <div data-position="30" class="hue-box mr-t-FM-30"> </div>
      <div data-position="31" class="hue-box mr-C-FM-31"> </div>
      <div data-position="32" class="hue-box mr-u-FM-32"> </div>
      <div data-position="33" class="hue-box mr-v-FM-33"> </div>
      <div data-position="34" class="hue-box mr-w-FM-34"> </div>
      <div data-position="35" class="hue-box mr-x-FM-35"> </div>
      <div data-position="36" class="hue-box mr-y-FM-36"> </div>
      <div data-position="37" class="hue-box mr-z-FM-37"> </div>
      <div data-position="38" class="hue-box mr-A-FM-38"> </div>
      <div data-position="39" class="hue-box mr-B-FM-39"> </div>
      <div data-position="40" class="hue-box mr-D-FM-40"> </div>
      <div data-position="41" class="hue-box mr-E-FM-41"> </div>
      <div data-position="42" class="hue-box mr-F-FM-42"> </div>
    </div>
    <div data-position="43" class="hue-box mr-G-FM-43" style="margin-left:5px"> </div>
  </section>
  <section class="hue-container container-3">
    <div data-position="43" class="hue-box mr-G-FM-43" style="margin-right:5px"> </div>
    <div id="row3">
      <div data-position="44" class="hue-box mr-H-FM-44"> </div>
      <div data-position="45" class="hue-box mr-I-FM-45"> </div>
      <div data-position="46" class="hue-box mr-J-FM-46"> </div>
      <div data-position="47" class="hue-box mr-K-FM-47"> </div>
      <div data-position="48" class="hue-box mr-L-FM-48"> </div>
      <div data-position="49" class="hue-box mr-M-FM-49"> </div>
      <div data-position="50" class="hue-box mr-N-FM-50"> </div>
      <div data-position="51" class="hue-box mr-O-FM-51"> </div>
      <div data-position="52" class="hue-box mr-P-FM-52"> </div>
      <div data-position="53" class="hue-box mr-Q-FM-53"> </div>
      <div data-position="54" class="hue-box mr-R-FM-54"> </div>
      <div data-position="55" class="hue-box mr-S-FM-55"> </div>
      <div data-position="56" class="hue-box mr-T-FM-56"> </div>
      <div data-position="57" class="hue-box mr-U-FM-57"> </div>
      <div data-position="58" class="hue-box mr-V-FM-58"> </div>
      <div data-position="59" class="hue-box mr-W-FM-59"> </div>
      <div data-position="60" class="hue-box mr-X-FM-60"> </div>
      <div data-position="61" class="hue-box mr-Y-FM-61"> </div>
      <div data-position="62" class="hue-box mr-Z-FM-62"> </div>
      <div data-position="63" class="hue-box mr-FM-63"> </div>
    </div>
    <div data-position="64" class="hue-box mr-FM-64" style="margin-left:5px"> </div>

  </section>
  <section class="hue-container container-4">
    <div data-position=" 64" class="hue-box mr-FM-64" style="margin-right:5px">
    </div>
    <div id="row4">
      <div data-position="65" class="hue-box mr-FM-65"> </div>
      <div data-position="66" class="hue-box mr-FM-66"> </div>
      <div data-position="67" class="hue-box mr-FM-67"> </div>
      <div data-position="68" class="hue-box mr-FM-68"> </div>
      <div data-position="69" class="hue-box mr-FM-69"> </div>
      <div data-position="70" class="hue-box mr-FM-70"> </div>
      <div data-position="71" class="hue-box mr-FM-71"> </div>
      <div data-position="72" class="hue-box mr-FM-72"> </div>
      <div data-position="73" class="hue-box mr-FM-73"> </div>
      <div data-position="74" class="hue-box mr-FM-74"> </div>
      <div data-position="75" class="hue-box mr-FM-75"> </div>
      <div data-position="76" class="hue-box mr-FM-76"> </div>
      <div data-position="77" class="hue-box mr-FM-77"> </div>
      <div data-position="78" class="hue-box mr-FM-78"> </div>
      <div data-position="79" class="hue-box mr-FM-79"> </div>
      <div data-position="80" class="hue-box mr-FM-80"> </div>
      <div data-position="81" class="hue-box mr-FM-81"> </div>
      <div data-position="82" class="hue-box mr-FM-82"> </div>
      <div data-position="83" class="hue-box mr-FM-83"> </div>
      <div data-position="84" class="hue-box mr-FM-84"> </div>
    </div>
    <div data-position="85" class="hue-box mr-FM-85" style="margin-left:5px"> </div>

  </section>

</div>
<hr>

<button form-action="submit" id=submitButton>
  Submit
</button>
<input name="fm100resuls" id="fm100results" style="visibility: hidden;">

<script>
  Sortable.create(row1, {
    animation: 150,
    ghostClass: 'ghostbox',
  });

  Sortable.create(row2, {
    animation: 150,
    ghostClass: 'ghostbox',
  });

  Sortable.create(row3, {
    animation: 150,
    ghostClass: 'ghostbox',
  });

  Sortable.create(row4, {
    animation: 150,
    ghostClass: 'ghostbox',
  });

  //shuffle function
  $(function () {
    var rowList = ["row1", "row2", "row3", "row4"];

    for (var rowId of rowList) {
      var parent = $("#" + rowId);
      var divs = parent.children();
      while (divs.length) {
        parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
      }
    }
  });

  function getFM100Order() {
    var rowList = ["row1", "row2", "row3", "row4"];
    var boundaries = ["1", "22", "43", "64", "85"];
    var colourBlockOrder = [];

    colourBlockOrder.push(boundaries[0]);
    i = 0;
    for (var rowId of rowList) {
      var parent = $("#" + rowId);
      var divs = parent.children();
      for (var divChild of divs) {
        colourBlockOrder.push($(divChild).attr("data-position"))
      }
      colourBlockOrder.push(boundaries[i + 1])
      i++
    }

    return colourBlockOrder;
  }

  //get current order on click
  $("#submitButton").click(function () {
    fm100Order = getFM100Order();

    console.log(fm100Order)
    document.getElementById("fm100results").value = fm100Order
    console.log("")
  });
</script>


<style>
  .ghostbox {
    visibility: hidden;
    cursor: none;
  }

  .container {
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto
  }

  .hue-container * {
    display: inline
  }

  .hue-container {
    font-size: 0;
    margin-bottom: 5px;
    text-align: center;
    /* background-color: #eaeaea; */
    padding: 10px 10px;
    max-width: 1000px;
    margin: 5px auto
  }

  .hue-box {
    padding: 20px;
    display: inline-block;
    border: 1px solid #000;
    cursor: pointer
  }

  .mr-0-fm-01 {
    background-color: #b2766f
  }

  .mr-1-fm-02 {
    background-color: #b1746a
  }

  .mr-2-fm-03 {
    background-color: #b17466
  }

  .mr-3-fm-04 {
    background-color: #b07464
  }

  .mr-4-fm-05 {
    background-color: #ae725f
  }

  .mr-5-fm-06 {
    background-color: #aa725b
  }

  .mr-6-fm-07 {
    background-color: #a8745a
  }

  .mr-7-fm-08 {
    background-color: #a87456
  }

  .mr-8-fm-09 {
    background-color: #a87452
  }

  .mr-9-fm-10 {
    background-color: #a97650
  }

  .mr-a-fm-11 {
    background-color: #a8794e
  }

  .mr-b-fm-12 {
    background-color: #a77c4e
  }

  .mr-c-FM-13 {
    background-color: #a97e4c
  }

  .mr-d-FM-14 {
    background-color: #a57e46
  }

  .mr-e-FM-15 {
    background-color: #a78244
  }

  .mr-f-FM-16 {
    background-color: #a48546
  }

  .mr-g-FM-17 {
    background-color: #a28946
  }

  .mr-h-FM-18 {
    background-color: #9f8b46
  }

  .mr-i-FM-19 {
    background-color: #9d8e48
  }

  .mr-j-FM-20 {
    background-color: #9b8f49
  }

  .mr-k-FM-21 {
    background-color: #97914b
  }

  .mr-l-FM-22 {
    background-color: #91924d
  }

  .mr-m-FM-23 {
    background-color: #8d9352
  }

  .mr-n-FM-24 {
    background-color: #899557
  }

  .mr-o-FM-25 {
    background-color: #86955c
  }

  .mr-p-FM-26 {
    background-color: #84975f
  }

  .mr-q-FM-27 {
    background-color: #7e9760
  }

  .mr-r-FM-28 {
    background-color: #7d9666
  }

  .mr-s-FM-29 {
    background-color: #7c9567
  }

  .mr-t-FM-30 {
    background-color: #7a986b
  }

  .mr-C-FM-31 {
    background-color: #73966b
  }

  .mr-u-FM-32 {
    background-color: #70996d
  }

  .mr-v-FM-33 {
    background-color: #699a71
  }

  .mr-w-FM-34 {
    background-color: #679a74
  }

  .mr-x-FM-35 {
    background-color: #649a76
  }

  .mr-y-FM-36 {
    background-color: #619778
  }

  .mr-z-FM-37 {
    background-color: #5b947a
  }

  .mr-A-FM-38 {
    background-color: #5a957f
  }

  .mr-B-FM-39 {
    background-color: #589480
  }

  .mr-D-FM-40 {
    background-color: #559584
  }

  .mr-E-FM-41 {
    background-color: #529687
  }

  .mr-F-FM-42 {
    background-color: #519688
  }

  .mr-G-FM-43 {
    background-color: #4e9689
  }

  .mr-H-FM-44 {
    background-color: #4c968e
  }

  .mr-I-FM-45 {
    background-color: #4c9691
  }

  .mr-J-FM-46 {
    background-color: #4a9794
  }

  .mr-K-FM-47 {
    background-color: #4a9696
  }

  .mr-L-FM-48 {
    background-color: #4b9596
  }

  .mr-M-FM-49 {
    background-color: #4a9698
  }

  .mr-N-FM-50 {
    background-color: #50969c
  }

  .mr-O-FM-51 {
    background-color: #52949f
  }

  .mr-P-FM-52 {
    background-color: #5393a1
  }

  .mr-Q-FM-53 {
    background-color: #5494a3
  }

  .mr-R-FM-54 {
    background-color: #5a92a4
  }

  .mr-S-FM-55 {
    background-color: #6090a5
  }

  .mr-T-FM-56 {
    background-color: #6690a5
  }

  .mr-U-FM-57 {
    background-color: #688fa7
  }

  .mr-V-FM-58 {
    background-color: #6b8ca6
  }

  .mr-W-FM-59 {
    background-color: #6c8aa6
  }

  .mr-X-FM-60 {
    background-color: #6f89a6
  }

  .mr-Y-FM-61 {
    background-color: #7489a7
  }

  .mr-Z-FM-62 {
    background-color: #7686a6
  }

  .mr-FM-63 {
    background-color: #7b84a3
  }

  .mr-FM-64 {
    background-color: #8084a3
  }

  .mr-FM-65 {
    background-color: #8484a3
  }

  .mr-FM-66 {
    background-color: #8a86a6
  }

  .mr-FM-67 {
    background-color: #8d85a3
  }

  .mr-FM-68 {
    background-color: #9185a3
  }

  .mr-FM-69 {
    background-color: #9483a0
  }

  .mr-FM-70 {
    background-color: #97839f
  }

  .mr-FM-71 {
    background-color: #99819d
  }

  .mr-FM-72 {
    background-color: #9d809b
  }

  .mr-FM-73 {
    background-color: #9f7f98
  }

  .mr-FM-74 {
    background-color: #a37d94
  }

  .mr-FM-75 {
    background-color: #a57c92
  }

  .mr-FM-76 {
    background-color: #a67a8e
  }

  .mr-FM-77 {
    background-color: #a9798b
  }

  .mr-FM-78 {
    background-color: #ab7788
  }

  .mr-FM-79 {
    background-color: #ae7787
  }

  .mr-FM-80 {
    background-color: #b07683
  }

  .mr-FM-81 {
    background-color: #b1757f
  }

  .mr-FM-82 {
    background-color: #b3747c
  }

  .mr-FM-83 {
    background-color: #b3757a
  }

  .mr-FM-84 {
    background-color: #b37576
  }

  .mr-FM-85 {
    background-color: #b37673
  }
</style>