Add card randomization

4 years ago · b8ec7eb439
3 changed files with 23 additions and 3 deletions
--- a/card-sort.html
+++ b/card-sort.html
@ -227,6 +227,9 @@
          categoryTemplate.content.querySelector('.title').removeAttribute('placeholder');
        }
        buttonCreateCategory.addEventListener('click', () => createCategory());
+        if (settings.isRandomized) {
+          cardTexts.sort(() => Math.random() - 0.5);
+        }
        for (const text of cardTexts) {
          createCard(text);
        }
--- a/common-scripts.js
+++ b/common-scripts.js
@ -2,15 +2,19 @@
 const settingsFlagsKey = '?';
 const settingsFlagsEnum = {
  allowCategoryEditing: 1,
+  isRandomized: 2,
 };
 const settingsDefaults = {
  allowCategoryEditing: true,
+  isRandomized: false,
 };

 function loadSettings(data) {
-  const settings = {};
+  const settings = Object.assign({}, settingsDefaults);
  const flags = data[settingsFlagsKey];
-  settings.allowCategoryEditing = Boolean(settingsFlagsEnum.allowCategoryEditing & flags);
+  for (const settingName of Object.keys(settingsFlagsEnum)) {
+    settings[settingName] = Boolean(settingsFlagsEnum[settingName] & flags);
+  }
  return settings;
 }
 function saveSettings(settings) {
--- a/index.html
+++ b/index.html
@ -28,7 +28,6 @@
      }
      textarea {
        padding: 0.5em;
-        margin-bottom: 1em;
        width: 100%;
        height: 20vh;
      }
@ -50,6 +49,9 @@
        word-break: break-all;
        padding-bottom: 2em;
      }
+      hr {
+        opacity: .3;
+      }
    </style>
  </head>
  <body>
@ -63,6 +65,15 @@
      <div>
        <textarea class="card-text-input"></textarea>
      </div>
+      <div>
+        <label>
+          <input class="is-randomized-checkbox" type="checkbox" />
+          <span>Randomize card order for each participant</span>
+        </label>
+      </div>
+      <div>
+        <hr />
+      </div>
      <div>Enter category names one per line or separated by commas (optional)</div>
      <div>
        <textarea class="category-name-input"></textarea>
@ -82,6 +93,7 @@
      const cardTextInput = document.querySelector('.card-text-input');
      const categoryNameInput = document.querySelector('.category-name-input');
      const categoryEditingCheckbox = document.querySelector('.category-editing-checkbox');
+      const isRandomizedCheckbox = document.querySelector('.is-randomized-checkbox');
      const linkContainer = document.querySelector('.link-container');
      const buttonCreateLink = document.querySelector('.btn-create-link');

@ -97,6 +109,7 @@
        data[uncategorizedKey] = cardTexts;
        const settings = {};
        settings.allowCategoryEditing = categoryEditingCheckbox.checked;
+        settings.isRandomized = isRandomizedCheckbox.checked;
        data[settingsFlagsKey] = saveSettings(settings);
        const dataString = await saveToString(data);
        const baseUrl = window.location.href.replace(regexRemoveBasenameFromUrl, '/');