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

4
index.html
View file

@ -9,6 +9,10 @@
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<script
src="https://drag-drop-touch-js.github.io/dragdroptouch/dist/drag-drop-touch.esm.min.js"
type="module"
></script>
</head>
<body style="height: 100%; margin: 0; padding: 0">
<div id="app" style="height: 100%"></div>

20
package-lock.json generated
View file

@ -9,7 +9,9 @@
"version": "0.0.0",
"dependencies": {
"chart.js": "^4.4.9",
"drag-drop-touch": "^1.3.1",
"random-words": "^2.0.1",
"svelte-drag-drop-touch": "^0.1.9",
"svelte-spa-router": "^4.0.1",
"word-exists": "^1.0.0"
},
@ -862,6 +864,16 @@
"node": ">=0.10.0"
}
},
"node_modules/drag-drop-touch": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/drag-drop-touch/-/drag-drop-touch-1.3.1.tgz",
"integrity": "sha512-Q0/ZgsnW7VUjn+YqSnp1rvxjjPnZX5YLyVaw28einood+eTMcLzgOgHk8nyqIF9O18J68l+2htlEnbw5GsyTvQ=="
},
"node_modules/dragdroptouch-bug-fixed": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/dragdroptouch-bug-fixed/-/dragdroptouch-bug-fixed-1.0.8.tgz",
"integrity": "sha512-moNgBeWMeUk4zhV3B+a4TZUPmHVJz+cvjWEXENLEU3toVnm3lpS+ZkSwVbBxArDUQ8HSm1qA0UmKWWy1y7nvng=="
},
"node_modules/esbuild": {
"version": "0.25.1",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.1.tgz",
@ -1143,6 +1155,14 @@
"node": ">=18"
}
},
"node_modules/svelte-drag-drop-touch": {
"version": "0.1.9",
"resolved": "https://registry.npmjs.org/svelte-drag-drop-touch/-/svelte-drag-drop-touch-0.1.9.tgz",
"integrity": "sha512-DWAMC+6xBRkl5OuVR7ze+znSKERlX9t9cx4/kzoWOnPwLFvv4g8YTtQxmO8wfWfETi9qgg/cnw58gmhZKY9vyw==",
"dependencies": {
"dragdroptouch-bug-fixed": "^1.0.8"
}
},
"node_modules/svelte-spa-router": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-4.0.1.tgz",

1
package.json
View file

@ -16,6 +16,7 @@
},
"dependencies": {
"chart.js": "^4.4.9",
"drag-drop-touch": "^1.3.1",
"random-words": "^2.0.1",
"svelte-spa-router": "^4.0.1",
"word-exists": "^1.0.0"

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}

2
src/RandomName/main.svelte
View file

@ -47,7 +47,7 @@ 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={() => {