LobotomyLabs/classquiz-ai
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚨 Fixed linter errors and formatting

Browse Source
This commit is contained in:
Mawoka
2023-08-02 09:45:02 +02:00
parent 36dbd6cd60
commit f84900b99a
5 changed files with 152 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
classquiz/routers/moderation.py
+1 -1
View File
@@ -23,7 +23,7 @@ async def get_mod_status(resp: Response, user: User = Depends(get_current_modera
@router.get("/quizzes") @router.get("/quizzes")
async def get_newest_quizzes( async def get_newest_quizzes(
page: int = 1, all: bool = False, user: User = Depends(get_current_moderator) page: int = 1, all: bool = False, user: User = Depends(get_current_moderator) # skipcq: PYL-W0622
) -> list[Quiz]: ) -> list[Quiz]:
if page < 1: if page < 1:
raise HTTPException(status_code=400, detail="page 1 is the first") raise HTTPException(status_code=400, detail="page 1 is the first")
frontend/src/lib/editor/MediaComponent.svelte
+6 -6
View File
@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
SPDX-License-Identifier: MPL-2.0 SPDX-License-Identifier: MPL-2.0
--> -->
<script lang='ts'> <script lang="ts">
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
@@ -71,14 +71,14 @@ SPDX-License-Identifier: MPL-2.0
<video <video
class={css_classes} class={css_classes}
disablepictureinpicture disablepictureinpicture
x-webkit-airplay='deny' x-webkit-airplay="deny"
controls controls
autoplay autoplay
loop loop
{muted} {muted}
preload='metadata' preload="metadata"
> >
<source src='/api/v1/storage/download/{src}' /> <source src="/api/v1/storage/download/{src}" />
</video> </video>
{:else} {:else}
<p>Unknown media type</p> <p>Unknown media type</p>
@@ -87,14 +87,14 @@ SPDX-License-Identifier: MPL-2.0
{#if fullscreen_open} {#if fullscreen_open}
<div <div
class='fixed top-0 left-0 z-50 w-screen h-screen bg-black bg-opacity-50 fle p-2' class="fixed top-0 left-0 z-50 w-screen h-screen bg-black bg-opacity-50 fle p-2"
transition:fade={{ duration: 80 }} transition:fade={{ duration: 80 }}
on:click={() => (fullscreen_open = false)} on:click={() => (fullscreen_open = false)}
> >
<img <img
src={img_data.data} src={img_data.data}
alt={img_data.alt_text ?? 'Not available'} alt={img_data.alt_text ?? 'Not available'}
class='object-cover rounded m-auto max-h-full max-w-full' class="object-cover rounded m-auto max-h-full max-w-full"
/> />
</div> </div>
{/if} {/if}
frontend/src/routes/moderation/+page.svelte
+28 -22
View File
@@ -4,48 +4,54 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
SPDX-License-Identifier: MPL-2.0 SPDX-License-Identifier: MPL-2.0
--> -->
<script lang='ts'> <script lang="ts">
import type { PageData } from './$types'; import type { PageData } from './$types';
import BrownButton from '$lib/components/buttons/brown.svelte'; import BrownButton from '$lib/components/buttons/brown.svelte';
import { page } from '$app/stores';
export let data: PageData; export let data: PageData;
</script> </script>
<div class='flex flex-col p-2'> <div class="flex flex-col p-2">
{#each data.quizzes as quiz} {#each data.quizzes as quiz}
<div class='border-2 border-[#B07156] rounded w-full h-[20vh] p-2 flex flex-col gap-2'> <div class="border-2 border-[#B07156] rounded w-full h-[20vh] p-2 flex flex-col gap-2">
<div class='grid grid-cols-3 h-full'> <div class="grid grid-cols-3 h-full">
<div class='hidden lg:flex w-auto h-full items-center relative'> <div class="hidden lg:flex w-auto h-full items-center relative">
{#if quiz.cover_image} {#if quiz.cover_image}
<img <img
src='/api/v1/storage/download/{quiz.cover_image}' src="/api/v1/storage/download/{quiz.cover_image}"
alt='user provided' alt="user provided"
loading='lazy' loading="lazy"
class='shrink-0 max-w-full max-h-full absolute rounded' class="shrink-0 max-w-full max-h-full absolute rounded"
/> />
{/if} {/if}
</div> </div>
<div class='my-auto mx-auto max-h-full overflow-hidden'> <div class="my-auto mx-auto max-h-full overflow-hidden">
<p class='text-xl text-center'>{@html quiz.title}</p> <p class="text-xl text-center">{@html quiz.title}</p>
<p class='text-sm text-center text-clip overflow-hidden'> <p class="text-sm text-center text-clip overflow-hidden">
{@html quiz.description ?? ''} {@html quiz.description ?? ''}
</p> </p>
</div> </div>
<div class='flex justify-center'> <div class="flex justify-center">
<p class='m-auto'>Questions: {quiz.questions.length}</p> <p class="m-auto">Questions: {quiz.questions.length}</p>
</div> </div>
</div> </div>
<div class='flex w-full'> <div class="flex w-full">
<BrownButton href='/view/{quiz.id}?mod=true&autoExpand=true&autoReturn=true'>View</BrownButton> <BrownButton href="/view/{quiz.id}?mod=true&autoExpand=true&autoReturn=true"
>View</BrownButton
>
</div> </div>
</div> </div>
{/each} {/each}
</div> </div>
<div class='flex'> <div class="flex">
<div class='grid grid-cols-3 mx-auto'> <div class="grid grid-cols-3 mx-auto">
<BrownButton disabled={data.page === "1"} href='/moderation?page={parseInt(data.page)+1}'>Previous Page</BrownButton> <BrownButton disabled={data.page === '1'} href="/moderation?page={parseInt(data.page) + 1}"
<p class='m-auto'>Page {data.page}</p> >Previous Page</BrownButton
<BrownButton disabled={data.quizzes.length !== 10} href='/moderation?page={parseInt(data.page)-1}'>Next Page</BrownButton> >
<p class="m-auto">Page {data.page}</p>
<BrownButton
disabled={data.quizzes.length !== 10}
href="/moderation?page={parseInt(data.page) - 1}">Next Page</BrownButton
>
</div> </div>
</div> </div>
frontend/src/routes/view/[quiz_id]/+page.svelte
+98 -98
View File
@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
SPDX-License-Identifier: MPL-2.0 SPDX-License-Identifier: MPL-2.0
--> -->
<script lang='ts'> <script lang="ts">
import { getLocalization } from '$lib/i18n'; import { getLocalization } from '$lib/i18n';
import CollapsSection from '$lib/collapsible.svelte'; import CollapsSection from '$lib/collapsible.svelte';
import { createTippy } from 'svelte-tippy'; import { createTippy } from 'svelte-tippy';
@@ -67,7 +67,7 @@ SPDX-License-Identifier: MPL-2.0
imported_from_kahoot?: boolean; imported_from_kahoot?: boolean;
questions: Question[]; questions: Question[];
kahoot_id?: string; kahoot_id?: string;
mod_rating?: number mod_rating?: number;
} }
</script> </script>
@@ -76,48 +76,48 @@ SPDX-License-Identifier: MPL-2.0
</svelte:head> </svelte:head>
<div> <div>
<h1 class='text-4xl text-center'>{@html quiz.title}</h1> <h1 class="text-4xl text-center">{@html quiz.title}</h1>
<div class='text-center'> <div class="text-center">
<p>{@html quiz.description}</p> <p>{@html quiz.description}</p>
</div> </div>
<p class='text-center'> <p class="text-center">
{$t('view_quiz_page.made_by')} {$t('view_quiz_page.made_by')}
<a href='/user/{quiz.user_id.id}' class='underline'>@{quiz.user_id.username}</a> <a href="/user/{quiz.user_id.id}" class="underline">@{quiz.user_id.username}</a>
</p> </p>
{#if quiz.cover_image} {#if quiz.cover_image}
<div class='flex justify-center align-middle items-center'> <div class="flex justify-center align-middle items-center">
<div class='h-[15vh] m-auto w-auto my-3'> <div class="h-[15vh] m-auto w-auto my-3">
<img <img
class='max-h-full max-w-full block' class="max-h-full max-w-full block"
src='/api/v1/storage/download/{quiz.cover_image}' src="/api/v1/storage/download/{quiz.cover_image}"
alt='Not provided' alt="Not provided"
/> />
</div> </div>
</div> </div>
{/if} {/if}
<div class='text-center text-sm pt-1 mb-4'> <div class="text-center text-sm pt-1 mb-4">
<ImportedOrNot imported={quiz.imported_from_kahoot} /> <ImportedOrNot imported={quiz.imported_from_kahoot} />
</div> </div>
<div class='flex justify-center mb-2 flex-row gap-2'> <div class="flex justify-center mb-2 flex-row gap-2">
<RatingComponent bind:quiz /> <RatingComponent bind:quiz />
{#if mod_view} {#if mod_view}
<ModComponent autoReturn={auto_return} quiz_id={quiz.id} /> <ModComponent autoReturn={auto_return} quiz_id={quiz.id} />
{/if} {/if}
</div> </div>
<div class='flex flex-col justify-center'> <div class="flex flex-col justify-center">
<div class='mx-auto flex flex-col gap-2 justify-center w-fit'> <div class="mx-auto flex flex-col gap-2 justify-center w-fit">
{#if quiz.imported_from_kahoot && quiz.kahoot_id} {#if quiz.imported_from_kahoot && quiz.kahoot_id}
<div class='w-full'> <div class="w-full">
<GrayButton <GrayButton
href='https://create.kahoot.it/details/{quiz.kahoot_id}' href="https://create.kahoot.it/details/{quiz.kahoot_id}"
target='_blank' target="_blank"
> >
{$t('view_quiz_page.view_on_kahoot')} {$t('view_quiz_page.view_on_kahoot')}
</GrayButton> </GrayButton>
</div> </div>
{/if} {/if}
{#if logged_in} {#if logged_in}
<div class='w-full'> <div class="w-full">
<GrayButton <GrayButton
on:click={() => { on:click={() => {
start_game = quiz.id; start_game = quiz.id;
@@ -126,76 +126,76 @@ SPDX-License-Identifier: MPL-2.0
> >
<!-- heroicons/legacy-outline/Play --> <!-- heroicons/legacy-outline/Play -->
<svg <svg
class='w-5 h-5' class="w-5 h-5"
aria-hidden='true' aria-hidden="true"
fill='none' fill="none"
stroke='currentColor' stroke="currentColor"
stroke-width='2' stroke-width="2"
viewBox='0 0 24 24' viewBox="0 0 24 24"
xmlns='http://www.w3.org/2000/svg' xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d='M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z' d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
stroke-linecap='round' stroke-linecap="round"
stroke-linejoin='round' stroke-linejoin="round"
/> />
<path <path
d='M21 12a9 9 0 11-18 0 9 9 0 0118 0z' d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
stroke-linecap='round' stroke-linecap="round"
stroke-linejoin='round' stroke-linejoin="round"
/> />
</svg> </svg>
</GrayButton> </GrayButton>
</div> </div>
{:else} {:else}
<div use:tippy={{ content: 'You need to be logged in to start a game' }}> <div use:tippy={{ content: 'You need to be logged in to start a game' }}>
<div class='w-full'> <div class="w-full">
<GrayButton disabled={true} flex={true}> <GrayButton disabled={true} flex={true}>
<!-- heroicons/legacy-outline/Play --> <!-- heroicons/legacy-outline/Play -->
<svg <svg
class='w-5 h-5' class="w-5 h-5"
aria-hidden='true' aria-hidden="true"
fill='none' fill="none"
stroke='currentColor' stroke="currentColor"
stroke-width='2' stroke-width="2"
viewBox='0 0 24 24' viewBox="0 0 24 24"
xmlns='http://www.w3.org/2000/svg' xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d='M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z' d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
stroke-linecap='round' stroke-linecap="round"
stroke-linejoin='round' stroke-linejoin="round"
/> />
<path <path
d='M21 12a9 9 0 11-18 0 9 9 0 0118 0z' d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
stroke-linecap='round' stroke-linecap="round"
stroke-linejoin='round' stroke-linejoin="round"
/> />
</svg> </svg>
</GrayButton> </GrayButton>
</div> </div>
</div> </div>
{/if} {/if}
<div class='w-full'> <div class="w-full">
<GrayButton href='/practice?quiz_id={quiz.id}'> <GrayButton href="/practice?quiz_id={quiz.id}">
{$t('words.practice')} {$t('words.practice')}
</GrayButton> </GrayButton>
</div> </div>
<div class='w-full'> <div class="w-full">
{#if logged_in} {#if logged_in}
<GrayButton flex={true} href='/api/v1/eximport/{quiz.id}'> <GrayButton flex={true} href="/api/v1/eximport/{quiz.id}">
<svg <svg
class='w-5 h-5 inline-block' class="w-5 h-5 inline-block"
fill='none' fill="none"
stroke='currentColor' stroke="currentColor"
viewBox='0 0 24 24' viewBox="0 0 24 24"
xmlns='http://www.w3.org/2000/svg' xmlns="http://www.w3.org/2000/svg"
> >
<path <path
stroke-linecap='round' stroke-linecap="round"
stroke-linejoin='round' stroke-linejoin="round"
stroke-width='2' stroke-width="2"
d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/> />
</svg> </svg>
{$t('words.download')} {$t('words.download')}
@@ -204,17 +204,17 @@ SPDX-License-Identifier: MPL-2.0
<div use:tippy={{ content: 'You need to be logged in to download a game' }}> <div use:tippy={{ content: 'You need to be logged in to download a game' }}>
<GrayButton disabled={true} flex={true}> <GrayButton disabled={true} flex={true}>
<svg <svg
class='w-5 h-5 inline-block' class="w-5 h-5 inline-block"
fill='none' fill="none"
stroke='currentColor' stroke="currentColor"
viewBox='0 0 24 24' viewBox="0 0 24 24"
xmlns='http://www.w3.org/2000/svg' xmlns="http://www.w3.org/2000/svg"
> >
<path <path
stroke-linecap='round' stroke-linecap="round"
stroke-linejoin='round' stroke-linejoin="round"
stroke-width='2' stroke-width="2"
d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/> />
</svg> </svg>
{$t('words.download')} {$t('words.download')}
@@ -223,10 +223,10 @@ SPDX-License-Identifier: MPL-2.0
{/if} {/if}
</div> </div>
</div> </div>
<div class='flex justify-center'> <div class="flex justify-center">
<a <a
href='mailto:report@mawoka.eu?subject=Report quiz {quiz.id}' href="mailto:report@mawoka.eu?subject=Report quiz {quiz.id}"
class='text-sm underline' class="text-sm underline"
> >
{$t('words.report')} {$t('words.report')}
</a> </a>
@@ -234,10 +234,10 @@ SPDX-License-Identifier: MPL-2.0
</div> </div>
{#each quiz.questions as question, index_question} {#each quiz.questions as question, index_question}
<div class='px-4 py-1'> <div class="px-4 py-1">
<CollapsSection headerText={question.question} expanded={auto_expand}> <CollapsSection headerText={question.question} expanded={auto_expand}>
<div class='grid grid-cols-1 gap-2 rounded-b-lg bg-white dark:bg-gray-700 -mt-1'> <div class="grid grid-cols-1 gap-2 rounded-b-lg bg-white dark:bg-gray-700 -mt-1">
<h3 class='text-3xl m-1 text-center'> <h3 class="text-3xl m-1 text-center">
{index_question + 1}: {@html question.question} {index_question + 1}: {@html question.question}
</h3> </h3>
@@ -247,41 +247,41 @@ SPDX-License-Identifier: MPL-2.0
{#if question.image} {#if question.image}
<span> <span>
<MediaComponent <MediaComponent
css_classes='mx-auto' css_classes="mx-auto"
src={question.image} src={question.image}
alt='Not provided' alt="Not provided"
muted={true} muted={true}
/> />
</span> </span>
{/if} {/if}
<p <p
class='m-1 flex flex-row gap-2 flex-nowrap whitespace-nowrap w-full justify-center' class="m-1 flex flex-row gap-2 flex-nowrap whitespace-nowrap w-full justify-center"
> >
<svg <svg
class='w-8 h-8 inline-block' class="w-8 h-8 inline-block"
fill='none' fill="none"
stroke='currentColor' stroke="currentColor"
viewBox='0 0 24 24' viewBox="0 0 24 24"
xmlns='http://www.w3.org/2000/svg' xmlns="http://www.w3.org/2000/svg"
> >
<path <path
stroke-linecap='round' stroke-linecap="round"
stroke-linejoin='round' stroke-linejoin="round"
stroke-width='2' stroke-width="2"
d='M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z' d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/> />
</svg> </svg>
<span class='text-lg'>{question.time}s</span> <span class="text-lg">{question.time}s</span>
</p> </p>
{#if question.type === QuizQuestionType.ABCD || question.type === undefined || question.type === QuizQuestionType.CHECK} {#if question.type === QuizQuestionType.ABCD || question.type === undefined || question.type === QuizQuestionType.CHECK}
<div class='grid grid-cols-2 gap-4 m-4 p-6'> <div class="grid grid-cols-2 gap-4 m-4 p-6">
{#each question.answers as answer, index_answer} {#each question.answers as answer, index_answer}
<div <div
class='p-1 rounded-lg py-4' class="p-1 rounded-lg py-4"
class:bg-green-500={answer.right} class:bg-green-500={answer.right}
class:bg-red-500={!answer.right} class:bg-red-500={!answer.right}
> >
<h4 class='text-center'> <h4 class="text-center">
{quiz.questions[index_question].answers[index_answer] {quiz.questions[index_question].answers[index_answer]
.answer} .answer}
</h4> </h4>
@@ -289,26 +289,26 @@ SPDX-License-Identifier: MPL-2.0
{/each} {/each}
</div> </div>
{:else if question.type === QuizQuestionType.RANGE} {:else if question.type === QuizQuestionType.RANGE}
<p class='m-1 text-center'> <p class="m-1 text-center">
All numbers between {question.answers.min_correct} All numbers between {question.answers.min_correct}
and {question.answers.max_correct} are correct, where numbers between {question and {question.answers.max_correct} are correct, where numbers between {question
.answers.min} and {question.answers.max} can be selected. .answers.min} and {question.answers.max} can be selected.
</p> </p>
{:else if question.type === QuizQuestionType.ORDER} {:else if question.type === QuizQuestionType.ORDER}
<ul class='flex flex-col gap-4 m-4 p-6'> <ul class="flex flex-col gap-4 m-4 p-6">
{#each question.answers as answer} {#each question.answers as answer}
<li class='p-1 rounded-lg py-3 dark:bg-gray-500 bg-gray-300'> <li class="p-1 rounded-lg py-3 dark:bg-gray-500 bg-gray-300">
<h4 class='text-center'> <h4 class="text-center">
{answer.answer} {answer.answer}
</h4> </h4>
</li> </li>
{/each} {/each}
</ul> </ul>
{:else if question.type === QuizQuestionType.VOTING || question.type === QuizQuestionType.TEXT} {:else if question.type === QuizQuestionType.VOTING || question.type === QuizQuestionType.TEXT}
<div class='grid grid-cols-2 gap-4 m-4 p-6'> <div class="grid grid-cols-2 gap-4 m-4 p-6">
{#each question.answers as answer, index_answer} {#each question.answers as answer, index_answer}
<div class='p-1 rounded-lg py-4 dark:bg-gray-500 bg-gray-300'> <div class="p-1 rounded-lg py-4 dark:bg-gray-500 bg-gray-300">
<h4 class='text-center'> <h4 class="text-center">
{quiz.questions[index_question].answers[index_answer] {quiz.questions[index_question].answers[index_answer]
.answer} .answer}
</h4> </h4>
@@ -319,7 +319,7 @@ SPDX-License-Identifier: MPL-2.0
{#await import('$lib/play/admin/slide.svelte')} {#await import('$lib/play/admin/slide.svelte')}
<Spinner my={false} /> <Spinner my={false} />
{:then c} {:then c}
<div class='max-h-[90%] max-w-[90%]'> <div class="max-h-[90%] max-w-[90%]">
<svelte:component this={c.default} bind:question /> <svelte:component this={c.default} bind:question />
</div> </div>
{/await} {/await}
frontend/src/routes/view/[quiz_id]/ModComponent.svelte
+18 -18
View File
@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
SPDX-License-Identifier: MPL-2.0 SPDX-License-Identifier: MPL-2.0
--> -->
<script lang='ts'> <script lang="ts">
import BrownButton from '$lib/components/buttons/brown.svelte'; import BrownButton from '$lib/components/buttons/brown.svelte';
import GrayButton from '$lib/components/buttons/gray.svelte'; import GrayButton from '$lib/components/buttons/gray.svelte';
@@ -21,35 +21,35 @@ SPDX-License-Identifier: MPL-2.0
body: JSON.stringify({ rating: mod_rating }) body: JSON.stringify({ rating: mod_rating })
}); });
if (res.ok && autoReturn) { if (res.ok && autoReturn) {
window.history.back() window.history.back();
} }
if (!res.ok) { if (!res.ok) {
alert("Setting rating failed") alert('Setting rating failed');
} }
}; };
</script> </script>
<div class='rounded border-2 border-[#B07156] flex flex-col w-fit gap-2 p-2'> <div class="rounded border-2 border-[#B07156] flex flex-col w-fit gap-2 p-2">
<div class:opacity-50={mod_rating !== null && mod_rating !== undefined} class='transition'> <div class:opacity-50={mod_rating !== null && mod_rating !== undefined} class="transition">
<BrownButton on:click={() => mod_rating = null}>Not Checked</BrownButton> <BrownButton on:click={() => (mod_rating = null)}>Not Checked</BrownButton>
</div> </div>
<div class:opacity-50={mod_rating !== 0 && mod_rating !== undefined} class='transition'> <div class:opacity-50={mod_rating !== 0 && mod_rating !== undefined} class="transition">
<BrownButton on:click={() => mod_rating = 0}>Ok</BrownButton> <BrownButton on:click={() => (mod_rating = 0)}>Ok</BrownButton>
</div> </div>
<div class:opacity-50={mod_rating !== 1 && mod_rating !== undefined} class='transition'> <div class:opacity-50={mod_rating !== 1 && mod_rating !== undefined} class="transition">
<BrownButton on:click={() => mod_rating = 1}>Attention</BrownButton> <BrownButton on:click={() => (mod_rating = 1)}>Attention</BrownButton>
</div> </div>
<div class:opacity-50={mod_rating !== 2 && mod_rating !== undefined} class='transition'> <div class:opacity-50={mod_rating !== 2 && mod_rating !== undefined} class="transition">
<BrownButton on:click={() => mod_rating = 2}>NFSW</BrownButton> <BrownButton on:click={() => (mod_rating = 2)}>NFSW</BrownButton>
</div> </div>
<div class:opacity-50={mod_rating !== 3 && mod_rating !== undefined} class='transition'> <div class:opacity-50={mod_rating !== 3 && mod_rating !== undefined} class="transition">
<BrownButton on:click={() => mod_rating = 3}>Plausibility Checked</BrownButton> <BrownButton on:click={() => (mod_rating = 3)}>Plausibility Checked</BrownButton>
</div> </div>
<div class:opacity-50={mod_rating !== 4 && mod_rating !== undefined} class='transition'> <div class:opacity-50={mod_rating !== 4 && mod_rating !== undefined} class="transition">
<BrownButton on:click={() => mod_rating = 4}>Fact Checked</BrownButton> <BrownButton on:click={() => (mod_rating = 4)}>Fact Checked</BrownButton>
</div> </div>
<div class:opacity-50={mod_rating !== 5 && mod_rating !== undefined} class='transition'> <div class:opacity-50={mod_rating !== 5 && mod_rating !== undefined} class="transition">
<BrownButton on:click={() => mod_rating = 5}>Exceptional</BrownButton> <BrownButton on:click={() => (mod_rating = 5)}>Exceptional</BrownButton>
</div> </div>
<GrayButton on:click={submit} disabled={mod_rating === undefined}>Submit</GrayButton> <GrayButton on:click={submit} disabled={mod_rating === undefined}>Submit</GrayButton>
</div> </div>