Closing #216

This commit is contained in:
Mawoka
2023-08-07 16:10:02 +02:00
parent 25806f3a04
commit 994983c58e
5 changed files with 109 additions and 100 deletions
@@ -18,7 +18,6 @@ SPDX-License-Identifier: MPL-2.0
quiz_colors.push(i.color);
}
console.log('mounted', question);
let sorted_data = {};
for (const i of quiz_answers) {
sorted_data[i] = 0;
@@ -28,27 +27,35 @@ SPDX-License-Identifier: MPL-2.0
}
</script>
<div class="flex justify-center h-full w-full">
<div class="flex justify-center w-full">
<div
class="m-auto grid grid-rows-3 w-fit gap-4"
class="m-auto w-fit gap-4 flex flex-col"
style="grid-template-columns: repeat({quiz_answers.length}, minmax(0, 1fr));"
>
{#each quiz_answers as answer}
<span class="text-center self-end"
>{#if sorted_data[answer] > 0}{sorted_data[answer]}{/if}</span
>
{/each}
{#each quiz_answers as answer, i}
<div
class="w-20 self-end flex justify-center"
style="height: {(sorted_data[answer] * 20) /
data.length}rem; background-color: {quiz_colors[i] ? quiz_colors[i] : 'black'}"
/>
{/each}
{#each quiz_answers as answer}
<div class="w-20">
<p class="-rotate-45">{@html answer}</p>
</div>
{/each}
<div class="flex gap-4">
{#each quiz_answers as answer}
<span class="text-center self-end mx-auto"
>{#if sorted_data[answer] > 0}{sorted_data[answer]}{/if}</span
>
{/each}
</div>
<div class="flex gap-4">
{#each quiz_answers as answer, i}
<div
class="w-20 self-end flex justify-center"
style="height: {(sorted_data[answer] * 20) /
data.length}rem; background-color: {quiz_colors[i]
? quiz_colors[i]
: 'black'}"
/>
{/each}
</div>
<div class="flex gap-4">
{#each quiz_answers as answer}
<div class="w-20">
<p class="-rotate-45">{@html answer}</p>
</div>
{/each}
</div>
</div>
</div>