I need to shuffle a list of items to create a Captcha
modeule in svelte, with type script
alnguage.
Currently I’m using the lodash
package, but as it appears, it does not work with Amazons MTurk
, so I need to replace it with some alternative.
Is there a native way in type script
to perform the shuffling without the use of external libraries?
Here is my current code:
Script Section:
<script lang="ts">
import {createEventDispatcher} from 'svelte'
import {shuffle} from "lodash";
const dispatchEvent = createEventDispatcher();
let allImages = [];
let imgs = [
{
id: 'img1',
url: "https://raw.githubusercontent.com/lieldvd/video_list/main/123900_26.jpg",
},
{
id: 'img2',
url: "https://raw.githubusercontent.com/lieldvd/video_list/main/59771_25.jpg",
},
{
id: 'img3',
url: "https://raw.githubusercontent.com/lieldvd/video_list/main/123900_43.jpg",
},
{
id: 'img4',
url: "https://raw.githubusercontent.com/lieldvd/video_list/main/173363_24.jpg",
},
{
id: 'img5',
url: "https://raw.githubusercontent.com/lieldvd/video_list/main/173363_40.jpg",
},
{
id: 'img6',
url: "https://raw.githubusercontent.com/lieldvd/video_list/main/72298_25.jpg",
},
{
id: 'img7',
url: "https://raw.githubusercontent.com/lieldvd/video_list/main/72298_55.jpg",
},
{
id: 'img8',
url: "https://raw.githubusercontent.com/lieldvd/video_list/main/86454_0.jpg",
},
{
id: 'img9',
url: "https://raw.githubusercontent.com/lieldvd/video_list/main/86454_9.jpg",
},
];
imgs = shuffle(imgs);
const correctImages = ["img1", "img2", "img4", "img7", "img8"];
let checkedImages: any = [];
let notRobot = false;
function checkIfRobot(event: any){
notRobot = checkedImages.length == correctImages.length && checkedImages.every(function (element) {return correctImages.includes(element)});
}
</script>
Main Section:
<main>
<h2>I'm not a robot challenge:</h2>
<div>
Please complete the following challenge to assert you are human.
In the following images choose the onse that describe a touch...
</div>
<div id="image-grid">
<div id="image-container">
{#each imgs as img, index (img.url)}
<img src={img.url} alt={img.id} width='200' height='150'/>
<input type="checkbox" id={img.id} value={img.id} bind:group={checkedImages}>
{#if (index+1) % 3 == 0}
<br/>
{/if}
{/each}
</div>
</div>
<button on:click={checkIfRobot}>Submit</button>
</main>
Thanks in advance.