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

🌐 Added strings to translate

Browse Source
This commit is contained in:
Mawoka
2022-03-26 20:38:19 +01:00
parent 7f44911c6e
commit dcf5c6e73e
12 changed files with 176 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package.json
+1 -1
View File
@@ -11,7 +11,7 @@
"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
"run:prod": "node index.js",
"translations-scan": "i18next-scanner --config i18next-scanner.config.engine.cjs src/routes/*/*.svelte"
"translations-scan": "i18next-scanner --config i18next-scanner.config.engine.cjs src/**/*.svelte"
},
"devDependencies": {
"@felte/validator-yup": "^1.0.1",
frontend/src/lib/editor.svelte
+15 -11
View File
@@ -1,4 +1,8 @@
<script lang="ts">
import { getLocalization } from '$lib/i18n';
const { t } = getLocalization();
interface Data {
public: boolean;
title: string;
@@ -51,37 +55,37 @@
</label>
{#each data.questions as question, index_question}
<div class="ml-8 grid grid-cols-1 gap-2 m-2 border border-black border-2">
<h1 class="text-3xl">Question {index_question + 1}</h1>
<h1 class="text-3xl">{$t('words.question')} {index_question + 1}</h1>
<label>
<input
type="text"
placeholder="Question"
placeholder={$t('words.question')}
bind:value={question.question}
class="text-black"
/>
Question
{$t('words.question')}
</label>
<label>
<input type="text" placeholder="20" bind:value={question.time} class="text-black" />
Time in seconds
{$t('editor.time_in_seconds')}
</label>
{#each question.answers as answer, index_answer}
<div class="ml-8 grid grid-cols-1 gap-2 m-2 border border-black border-2">
<h1 class="text-3xl">Answer {index_answer + 1}</h1>
<p>Answer: {index_answer} Question: {index_question}</p>
<h1 class="text-3xl">{$t('words.answer')} {index_answer + 1}</h1>
<p>{$t('words.answer')}: {index_answer} {$t('words.question')}: {index_question}</p>
<label>
<input
type="text"
placeholder="Answer"
placeholder={$t('words.answer')}
bind:value={data.questions[index_question].answers[index_answer].answer}
class="text-black"
/>
Answer
{$t('words.answer')}
</label>
<label>
<input type="checkbox" bind:checked={answer.right} class="text-black" />
Right?
{$t('editor.right_or_true?')}?
</label>
<button
class="text-left"
@@ -93,7 +97,7 @@
];
}}
>
Add new answer
{$t('editor.add_new_answer')}
</button>
</div>
{/each}
@@ -104,7 +108,7 @@
data.questions = [...data.questions, { ...empty_question }];
}}
>
Add new question
{$t('editor.add_new_question')}
</button>
</div>
{/each}
frontend/src/lib/i18n/locales/de.json
+52 -23
View File
@@ -4,8 +4,6 @@
"title": "Home",
"description": "ClassQuiz ist eine Quiz-App wie KAHOOT! für Schüler*innen, welche open-source und kostenlos ist"
},
"stats": "Statistiken",
"features": "Features",
"features_description": {
"1": "ClassQuiz ist eine Quiz-Platform, welche das erstellen und managen von Quizzes erlaubt.",
"2": "Das Hauptfeature ist die KAHOOT!-Importfunktion, mit der man Quizzes von KAHOOT! importieren kann."
@@ -13,41 +11,24 @@
"slogan": "Die open-source Quiz-Platform!"
},
"overview_page": {
"create": "Erstellen",
"import": "Importieren",
"logout": "Ausloggen",
"title": "Titel",
"created_at": "Erstellt am",
"question_count": "Fragenanzahl",
"play": "Spielen",
"edit": "Bearbeiten",
"delete": "Löschen",
"public": "Öffentlich",
"start": "Starten"
"question_count": "Fragenanzahl"
},
"edit_page": {
"save": "Speichern",
"success_update_title": "Quiz erfolgreich aktualisiert!",
"success_update_body": "Das Quiz wurde erfolgreich aktualisiert!",
"close": "Schließen"
"success_update_body": "Das Quiz wurde erfolgreich aktualisiert!"
},
"create_page": {
"success": {
"title": "Quiz erfolgreich erstellt!",
"body": "Das Quiz wurde erfolgreich erstellt!"
},
"close": "Schließen"
}
},
"register_page": {
"greeting": "Schön, dich zu sehen!",
"create_account": "Account erstellen",
"email": "Email",
"username": "Nutzername",
"password": "Passwort",
"forgot_password?": "Passwort vergessen?",
"register": "Registrieren",
"already_have_account?": "Hast du schon einen Account?",
"login": "Login"
"already_have_account?": "Hast du schon einen Account?"
},
"login_page": {
"welcome_back": "Willkommen zurück!",
@@ -71,5 +52,53 @@
}
}
}
},
"words": {
"question": "",
"answer": "",
"stats": "",
"features": "",
"import": "",
"url": "",
"submit": "",
"create": "",
"logout": "",
"title": "",
"play": "",
"edit": "",
"delete": "",
"public": "",
"start": "",
"connect": "",
"pin": "",
"kick": "",
"register": "",
"login": "",
"docs": "",
"close": "",
"save": ""
},
"editor": {
"time_in_seconds": "",
"right_or_true?": "",
"add_new_answer": "",
"add_new_question": ""
},
"import": {
"need_help": "",
"visit_docs": ""
},
"admin": {
"already_registered_as_admin": ""
},
"admin_page": {
"already_registered_as_admin": "",
"start_game": "",
"time_left": "",
"get_results": ""
},
"import_page": {
"need_help": "",
"visit_docs": ""
}
}
frontend/src/lib/i18n/locales/en.json
+48 -23
View File
@@ -5,49 +5,30 @@
"description": "ClassQuiz is a quiz app like KAHOOT! for students, which is open source and free to use",
"title": "Home"
},
"stats": "Stats",
"features": "Features",
"features_description": {
"1": "ClassQuiz is a quiz-platform that allows you to create and manage quizzes.",
"2": "The main feature is a KAHOOT!-import function that allows you to import quizzes from KAHOOT!-quizzes."
}
},
"overview_page": {
"create": "Create",
"import": "Import",
"logout": "Logout",
"title": "Title",
"created_at": "Created at",
"question_count": "Question count",
"play": "Play",
"edit": "Edit",
"delete": "Delete",
"public": "Public",
"start": "Start"
"question_count": "Question count"
},
"edit_page": {
"save": "Save",
"success_update_title": "Successfully updated quiz!",
"success_update_body": "Updated the quiz successfully!",
"close": "Close"
"success_update_body": "Updated the quiz successfully!"
},
"create_page": {
"success": {
"title": "Successfully created quiz!",
"body": "Created the quiz successfully!"
},
"close": "Close"
}
},
"register_page": {
"greeting": "Nice to meet you!",
"create_account": "Create account",
"email": "Email",
"username": "Username",
"password": "Password",
"forgot_password?": "Forgot password?",
"register": "Register",
"already_have_account?": "Already have an account?",
"login": "Login"
"already_have_account?": "Already have an account?"
},
"login_page": {
"welcome_back": "Welcome back!",
@@ -71,5 +52,49 @@
}
}
}
},
"words": {
"question": "Question",
"answer": "Answer",
"stats": "Stats",
"features": "Features",
"login": "Login",
"email": "Email",
"username": "Username",
"password": "Password",
"play": "Play",
"edit": "Edit",
"delete": "Delete",
"public": "Public",
"start": "Start",
"create": "Create",
"import": "Import",
"logout": "Logout",
"title": "Title",
"url": "URL",
"submit": "Submit",
"connect": "Connect",
"pin": "PIN",
"kick": "Kick",
"register": "Register",
"docs": "Docs",
"close": "Close",
"save": "Save"
},
"editor": {
"time_in_seconds": "Time in seconds",
"right_or_true?": "Right?",
"add_new_answer": "Add new answer",
"add_new_question": "Add new question"
},
"import_page": {
"need_help": "Need help?",
"visit_docs": "Visit the documentation"
},
"admin_page": {
"already_registered_as_admin": "There is already an admin registered for this game.",
"start_game": "Start game",
"time_left": "Time left",
"get_results": "Get results"
}
}
frontend/src/lib/navbar.svelte
+7 -4
View File
@@ -1,5 +1,8 @@
<script>
import '@fontsource/marck-script/index.css';
import { getLocalization } from '$lib/i18n';
const { t } = getLocalization();
let openMenu = true;
let closeMenu = false;
@@ -82,19 +85,19 @@
<li class="py-2">
<a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
href="/play">Play</a
href="/play">{$t('words.play')}</a
>
</li>
<li class="py-2">
<a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
href="/account/register">Register</a
href="/account/register">{$t('words.register')}</a
>
</li>
<li class="py-2">
<a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
href="/account/login">Login</a
href="/account/login">{$t('words.login')}</a
>
</li>
<li class="py-2">
@@ -106,7 +109,7 @@
<li class="py-2">
<a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
href="/docs">Docs</a
href="/docs">{$t('words.docs')}</a
>
</li>
</ul>
frontend/src/routes/account/register.svelte
+12 -11
View File
@@ -103,7 +103,7 @@
name="email"
type="email"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
placeholder={$t('register_page.email')}
placeholder={$t('words.email')}
class:ring-red-700={$errors.email !== null}
class:ring-green-600={$touched.email === true &&
$errors.email === null}
@@ -112,7 +112,7 @@
for="email"
class="absolute cursor-text left-0 -top-3 text-sm text-gray-700 dark:text-white bg-inherit mx-1 px-1 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 peer-focus:-top-3 peer-focus:text-sky-600 peer-focus:text-sm transition-all"
>
{$t('register_page.email')}
{$t('words.email')}
</label>
</div>
</div>
@@ -123,7 +123,7 @@
name="username"
type="text"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
placeholder={$t('register_page.username')}
placeholder={$t('words.username')}
class:ring-red-700={$errors.username !== null}
class:ring-green-600={$touched.username === true &&
$errors.username === null}
@@ -132,7 +132,7 @@
for="username"
class="absolute cursor-text left-0 -top-3 text-sm text-gray-700 dark:text-white bg-inherit mx-1 px-1 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 peer-focus:-top-3 peer-focus:text-sky-600 peer-focus:text-sm transition-all"
>
{$t('register_page.username')}
{$t('words.username')}
</label>
</div>
</div>
@@ -146,13 +146,13 @@
class:ring-green-600={$touched.password1 === true &&
$errors.password1 === null}
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
placeholder={$t('register_page.password')}
placeholder={$t('words.password')}
/>
<label
for="password1"
class="absolute cursor-text left-0 -top-3 text-sm text-gray-500 bg-inherit mx-1 px-1 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 peer-focus:-top-3 peer-focus:text-sky-600 peer-focus:text-sm transition-all"
>
{$t('register_page.password')}
{$t('words.password')}
</label>
</div>
</div>
@@ -163,7 +163,7 @@
name="password2"
type="password"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
placeholder={$t('register_page.password')}
placeholder={$t('words.password')}
class:ring-red-700={$errors.password2 !== null}
class:ring-green-600={$touched.password2 === true &&
$errors.password2 === null}
@@ -172,7 +172,7 @@
for="password2"
class="absolute cursor-text left-0 -top-3 text-sm text-gray-500 bg-inherit mx-1 px-1 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 peer-focus:-top-3 peer-focus:text-sky-600 peer-focus:text-sm transition-all"
>
{$t('register_page.password')}
{$t('words.password')}
</label>
</div>
</div>
@@ -203,7 +203,7 @@
/>
</svg>
{:else}
{$t('register_page.register')}
{$t('words.register')}
{/if}
</button>
</div>
@@ -221,7 +221,7 @@
<a
href="/account/login"
class="mx-2 text-sm font-bold text-blue-500 dark:text-blue-400 hover:underline"
>{$t('register_page.login')}</a
>{$t('words.login')}</a
>
</div>
</div>
@@ -327,6 +327,7 @@
<div class="mt-2">
<p class="text-sm text-gray-500">
{#if responseData.data === '200'}
<!-- TODO: Add translation -->
You signed up successfully! Please check your mailbox to confirm
your email address!
{:else if responseData.data === '409'}
@@ -350,7 +351,7 @@
responseData.open = false;
}}
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
>Close
>{$t('words.login')}
</button>
</div>
</div>
frontend/src/routes/admin.svelte
+10 -8
View File
@@ -26,6 +26,9 @@
import type { QuizData } from '../app';
import { socket } from '$lib/socket';
import { getLocalization } from '$lib/i18n';
const { t } = getLocalization();
// let gameData = {
// game_id: 'a7ddb6af-79ab-45e0-b996-6254c1ad9818',
@@ -34,7 +37,6 @@
export let game_pin: string;
export let auto_connect: boolean;
export let game_token: string;
console.log(game_pin, game_token);
let success = false;
let players: Array<string> = [];
let errorMessage = '';
@@ -65,7 +67,7 @@
players = [...players, data];
});
socket.on('already_registered_as_admin', () => {
errorMessage = 'There is already an admin registered for this game.';
errorMessage = $t('admin_page.already_registered_as_admin');
});
let timer_res: string;
const set_question_number = (q_number: number) => {
@@ -111,7 +113,7 @@
{#if !success}
<input placeholder="game id" bind:value={game_token} />
<input placeholder="game pin" bind:value={game_pin} />
<button on:click={connect}>Connect!</button>
<button on:click={connect}>{$t('words.connect')}!</button>
{#if errorMessage !== ''}
<p class="text-red-700">{errorMessage}</p>
{/if}
@@ -121,13 +123,13 @@
src="/api/v1/utils/qr/{quiz_data.game_pin}?ref=qr"
class="block mx-auto w-1/6"
/>
<p class="text-3xl text-center">Pin: {quiz_data.game_pin}</p>
<p class="text-3xl text-center">{$t('words.pin')}: {quiz_data.game_pin}</p>
<ul>
{#if players.length > 0}
{#each players as player}
<li>
<span>{player.username} </span>
<button>Kick</button>
<button>{$t('words.kick')}</button>
</li>
{/each}
{/if}
@@ -138,14 +140,14 @@
socket.emit('start_game', '');
game_started = true;
}}
>Start Game
>{$t('admin_page.start_game')}
</button>
{/if}
{:else}
<span>Time left: {timer_res}</span>
<span>{$t('admin_page.time_left')}: {timer_res}</span>
<br />
{#if timer_res === '0'}
<button on:click={get_question_results}>Get results</button>
<button on:click={get_question_results}>{$t('admin_page.get_results')}</button>
<br />
{#if question_results !== null}
<br />
frontend/src/routes/create.svelte
+1 -1
View File
@@ -152,7 +152,7 @@
window.location.href = '/overview';
}}
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
>{$t('create_page.close')}
>{$t('words.close')}
</button>
</div>
</div>
frontend/src/routes/edit.svelte
+2 -2
View File
@@ -91,7 +91,7 @@
{:then lol}
{#if data !== undefined}
<form on:submit|preventDefault={submit} class="grid grid-cols-1 gap-2">
<Editor bind:data submit_button_text={$t('edit_page.save')} />
<Editor bind:data submit_button_text={$t('words.save')} />
</form>
{/if}
{:catch err}
@@ -161,7 +161,7 @@
window.location.href = '/overview';
}}
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
>{$t('edit_page.close')}
>{$t('words.close')}
</button>
</div>
</div>
frontend/src/routes/import.svelte
+16 -11
View File
@@ -15,6 +15,9 @@
</script>
<script lang="ts">
import { getLocalization } from '$lib/i18n';
const { t } = getLocalization();
let url_input = '';
let url_valid = false;
@@ -77,16 +80,16 @@
>
<div class="px-6 py-4">
<h2 class="text-3xl font-bold text-center text-gray-700 dark:text-white">
ClassQuiz
{$t('words.import')}
</h2>
<h3 class="mt-1 text-xl font-medium text-center text-gray-600 dark:text-gray-200">
Welcome Back
</h3>
<!-- <h3 class="mt-1 text-xl font-medium text-center text-gray-600 dark:text-gray-200">
Welcome Back
</h3>-->
<p class="mt-1 text-center text-gray-500 dark:text-gray-400">
Login or create account
</p>
<!-- <p class="mt-1 text-center text-gray-500 dark:text-gray-400">
Login or create account
</p>-->
<form on:submit|preventDefault={submit}>
<div class="w-full mt-4">
@@ -106,7 +109,7 @@
for="url"
class="absolute cursor-text left-0 -top-3 text-sm text-gray-700 dark:text-white bg-inherit mx-1 px-1 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 peer-focus:-top-3 peer-focus:text-sky-600 peer-focus:text-sm transition-all"
>
URL
{$t('words.url')}
</label>
</div>
</div>
@@ -134,7 +137,7 @@
/>
</svg>
{:else}
Submit
{$t('words.submit')}
{/if}
</button>
</div>
@@ -144,12 +147,14 @@
<div
class="flex items-center justify-center py-4 text-center bg-gray-50 dark:bg-gray-700"
>
<span class="text-sm text-gray-600 dark:text-gray-200">Need help? </span>
<span class="text-sm text-gray-600 dark:text-gray-200"
>{$t('import_page.need_help')}</span
>
<a
href="/docs/import-from-kahoot"
class="mx-2 text-sm font-bold text-blue-500 dark:text-blue-400 hover:underline"
>Visit the docs</a
>{$t('import_page.visit_docs')}</a
>
</div>
</div>
frontend/src/routes/index.svelte
+2 -2
View File
@@ -31,7 +31,7 @@
<section id="stats">
<div class="text-center pt-48 snap-y">
<h1 class="sm:text-6xl text-4xl">{$t('index_page.stats')}</h1>
<h1 class="sm:text-6xl text-4xl">{$t('words.stats')}</h1>
<p class="text-xl pt-4">
{#await getStats() then stats}
There are already <span class="underline">{stats.user_count}</span> users and <!-- TODO: Add translation -->
@@ -42,7 +42,7 @@
</section>
<section id="features">
<div class="text-center pt-24 snap-y">
<h1 class="sm:text-6xl text-4xl">{$t('index_page.features')}</h1>
<h1 class="sm:text-6xl text-4xl">{$t('words.features')}</h1>
<p class="text-xl pt-4">
{$t('index_page.features_description.1')}
<br />
frontend/src/routes/overview.svelte
+10 -10
View File
@@ -78,17 +78,17 @@
<a
href="/create"
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
>{$t('overview_page.create')}
>{$t('words.create')}
</a>
<a
href="/import"
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
>{$t('overview_page.import')}
>{$t('words.import')}
</a>
<a
href="/api/v1/users/logout"
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
>{$t('overview_page.logout')}
>{$t('words.logout')}
</a>
</div>
<div class="overflow-x-auto sm:-mx-8 lg:-mx-8">
@@ -101,7 +101,7 @@
scope="col"
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
>
{$t('overview_page.title')}
{$t('words.title')}
</th>
<th
scope="col"
@@ -119,25 +119,25 @@
scope="col"
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
>
{$t('overview_page.play')}
{$t('words.play')}
</th>
<th
scope="col"
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
>
{$t('overview_page.edit')}
{$t('words.edit')}
</th>
<th
scope="col"
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
>
{$t('overview_page.delete')}
{$t('words.delete')}
</th>
<th
scope="col"
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
>
{$t('overview_page.public')}
{$t('words.public')}
</th>
</tr>
</thead>
@@ -169,7 +169,7 @@
}}
class="border border-green-600"
>
{$t('overview_page.start')}
{$t('words.start')}
</button>
</td>
<td
@@ -186,7 +186,7 @@
}}
class="border border-green-600"
>
{$t('overview_page.delete')}
{$t('words.delete')}
</button>
</td>
<td