You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
4.0 KiB
134 lines
4.0 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf8" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
<title>Card Sorting</title> |
|
<style> |
|
/* Reset */ |
|
body, html { |
|
margin: 0; |
|
padding: 0; |
|
font-family: sans-serif; |
|
} |
|
* { |
|
box-sizing: border-box; |
|
} |
|
.main-layout { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
padding-top: 2em; |
|
} |
|
.main-layout > div { |
|
width: 100%; |
|
max-width: 600px; |
|
margin-bottom: 1em; |
|
font-size: 24px; |
|
} |
|
textarea { |
|
padding: 0.5em; |
|
width: 100%; |
|
height: 20vh; |
|
} |
|
label { |
|
cursor: pointer; |
|
} |
|
button { |
|
margin-top: 1em; |
|
margin-bottom: 1em; |
|
padding: 0.3em 0.5em; |
|
font-size: 24px; |
|
cursor: pointer; |
|
} |
|
input[type="checkbox"] { |
|
width: 20px; |
|
height: 20px; |
|
} |
|
.link-container { |
|
word-break: break-all; |
|
padding-bottom: 2em; |
|
} |
|
hr { |
|
opacity: .3; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="main-layout"> |
|
<h1> |
|
<span>Card Sorting</span> |
|
<span>•</span> |
|
<a href="https://github.com/indigane/cardsort/">Readme</a> |
|
</h1> |
|
<div>Enter card texts one per line or separated by commas</div> |
|
<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> |
|
</div> |
|
<div> |
|
<label> |
|
<input class="category-editing-checkbox" type="checkbox" checked /> |
|
<span>Allow category editing</span> |
|
</label> |
|
</div> |
|
<button class="btn-create-link">Create a link for card sorting</button> |
|
<div class="link-container"></div> |
|
</div> |
|
<script src="pako-2.0.4.min.js"></script> |
|
<script src="common-scripts.js"></script> |
|
<script> |
|
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'); |
|
|
|
buttonCreateLink.addEventListener('click', createLink); |
|
|
|
async function createLink() { |
|
const cardTexts = textToArray(cardTextInput.value); |
|
const categoryNames = textToArray(categoryNameInput.value); |
|
const data = {}; |
|
for (const categoryName of categoryNames) { |
|
data[categoryName] = []; |
|
} |
|
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, '/'); |
|
const url = baseUrl + 'card-sort.html#' + dataString; |
|
linkContainer.innerHTML = `<a href="${url}">${url}</a>`; |
|
} |
|
|
|
function textToArray(text) { |
|
let resultArray; |
|
if (text.trim().includes('\n')) { |
|
resultArray = text.split('\n'); |
|
} |
|
else { |
|
resultArray = text.split(','); |
|
} |
|
resultArray = resultArray.map(item => item.trim()); |
|
resultArray = resultArray.filter(item => !!item); |
|
return resultArray; |
|
} |
|
</script> |
|
</body> |
|
</html> |