RezHackXYZ/classroomstuff
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

now you can move names from one list to another using drag!

Browse source
This commit is contained in:
RezHackXYZ 2025-05-06 21:05:23 +05:30
parent 70c9a703c5
commit a7fa6d620e
6 changed files with 150 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

93
src/RandomName/TopDisplay.svelte
View file

@ -1,35 +1,108 @@
<script>
<script context="module">
import { RandomNamesState } from "./main.svelte";
let DragTempName = "na";
import "drag-drop-touch";
</script>
<div id="root">
<div id="NotSelectedYet">
<div
id="NotSelectedYet"
on:dragover|preventDefault
role="list"
aria-label="drag name to this list!"
on:drop={(event) => {
event.preventDefault();
if (DragTempName !== "na") {
RandomNamesState.NotSelectedYet.push(DragTempName);
DragTempName = "na";
}
}}
>
<h1>Not Selected Yet</h1>
<div class="wrap">
{#each RandomNamesState.NotSelectedYet as name}
<span draggable="true" class="NotSelectedYet">
{#each RandomNamesState.NotSelectedYet as name, i}
<span
class="NotSelectedYet"
draggable="true"
role="listitem"
aria-label="drag name to different list!"
on:dragstart={() => {
setTimeout(() => {
RandomNamesState.NotSelectedYet.splice(i, 1);
DragTempName = name;
}, 100);
}}
>
{name}
</span>
{/each}
</div>
</div>
<hr />
<div id="Selected">
<div
id="Selected"
on:dragover|preventDefault
role="list"
aria-label="drag name to this list!"
on:drop={(event) => {
event.preventDefault();
if (DragTempName !== "na") {
RandomNamesState.Selected.push(DragTempName);
DragTempName = "na";
}
}}
>
<h1>Selected</h1>
<div class="wrap">
{#each RandomNamesState.Selected as name}
<span draggable="true" class="Selected">
{#each RandomNamesState.Selected as name, i}
<span
class="Selected"
draggable="true"
role="listitem"
aria-label="drag name to different list!"
on:dragstart={() => {
setTimeout(() => {
RandomNamesState.Selected.splice(i, 1);
DragTempName = name;
}, 100);
}}
>
{name}
</span>
{/each}
</div>
</div>
<hr />
<div id="Absent">
<div
id="Absent"
on:dragover|preventDefault
role="list"
aria-label="drag name to this list!"
on:drop={(event) => {
event.preventDefault();
if (DragTempName !== "na") {
RandomNamesState.Absent.push(DragTempName);
DragTempName = "na";
}
}}
>
<h1>Absent</h1>
<div class="wrap">
{#each RandomNamesState.Absent as name}
<span draggable="true" class="Absent">
{#each RandomNamesState.Absent as name, i}
<span
draggable="true"
class="Absent"
role="listitem"
aria-label="drag name to different list!"
on:dragstart={() => {
setTimeout(() => {
RandomNamesState.Absent.splice(i, 1);
DragTempName = name;
}, 100);
}}
>
{name}
</span>
{/each}

80
src/RandomName/main.svelte
View file

@ -6,48 +6,48 @@
console.log("Edit list of names");
}
export let RandomNamesState = $state({
NotSelectedYet: [
"John",
"Jane",
"Alice",
"Bob",
"Charlie",
"Diana",
"Eve",
"Frank",
"Grace",
"Hank",
],
Selected: [
"John",
"Jane",
"Alice",
"Bob",
"Charlie",
"Diana",
"Eve",
"Frank",
"Grace",
"Hank",
],
Absent: [
"John",
"Jane",
"Alice",
"Bob",
"Charlie",
"Diana",
"Eve",
"Frank",
"Grace",
"Hank",
],
selectedStudent: "none :(",
});
export let RandomNamesState = $state({
NotSelectedYet: [
"John",
"Jane",
"Alice",
"Bob",
"Charlie",
"Diana",
"Eve",
"Frank",
"Grace",
"Hank",
],
Selected: [
"John",
"Jane",
"Alice",
"Bob",
"Charlie",
"Diana",
"Eve",
"Frank",
"Grace",
"Hank",
],
Absent: [
"John",
"Jane",
"Alice",
"Bob",
"Charlie",
"Diana",
"Eve",
"Frank",
"Grace",
"Hank",
],
selectedStudent: "none :(",
});
export function SelectStudent() {
if (RandomNamesState.NotSelectedYet.length > 0) {
if (RandomNamesState.NotSelectedYet.length != 0) {
let randomIndex = Math.floor(
Math.random() * RandomNamesState.NotSelectedYet.length
);

4
src/RandomName/selector.svelte
View file

@ -4,9 +4,9 @@
<div id="root">
<p>The Selected Student is</p>
<p>thier name has bean auto moved to the Selected list</p>
<h1>{RandomNamesState.selectedStudent}</h1>
<p>(The Selected Student's name will be auto moved to the Selected list)</p>
<button
aria-label="Back to main menu"
onclick={() => {