Feature help widget

Directory.Packages.props

@@ -18,7 +18,7 @@
     <PackageVersion Include="coverlet.collector" Version="6.0.2" />
     <PackageVersion Include="DeepCloner" Version="0.10.4" />
     <PackageVersion Include="Google.Apis.Gmail.v1" Version="1.68.0.3427" />
-    <PackageVersion Include="JWMB.AzureTableGenerics" Version="0.0.5" />
+    <PackageVersion Include="JWMB.AzureTableGenerics" Version="0.0.6-preview.10" />
     <PackageVersion Include="Microsoft.ApplicationInsights" Version="2.22.0" />
     <PackageVersion Include="Microsoft.ApplicationInsights.AspNetCore" Version="2.22.0" />
     <PackageVersion Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="9.0.0" />

ProblemSource/AdminApp/package.json

@@ -14,25 +14,26 @@
 	},
 	"devDependencies": {
 		"@playwright/test": "1.25.0",
+		"@sveltejs/adapter-auto": "2.0.0",
 		"@sveltejs/adapter-static": "2.0.1",
+		"@sveltejs/kit": "1.5.0",
 		"@types/color-convert": "2.0.0",
+		"@types/node": "18.15.5",
 		"@typescript-eslint/eslint-plugin": "5.27.0",
 		"@typescript-eslint/parser": "5.27.0",
 		"@vitejs/plugin-basic-ssl": "1.0.1",
 		"eslint": "8.16.0",
 		"eslint-config-prettier": "8.3.0",
 		"eslint-plugin-svelte3": "4.0.0",
+		"mdsvex": "^0.11.1",
 		"prettier": "2.6.2",
 		"prettier-plugin-svelte": "2.7.0",
+		"svelte": "3.55.0",
+		"svelte-check": "3.0.1",
 		"svelte-preprocess": "5.0.3",
-		"@sveltejs/adapter-auto": "2.0.0",
-        "@sveltejs/kit": "1.5.0",
-        "@types/node": "18.15.5",
-        "svelte": "3.55.0",
-        "svelte-check": "3.0.1",
-        "tslib": "2.4.1",
-        "typescript": "5.6.3",
-        "vite": "4.2.0"
+		"tslib": "2.4.1",
+		"typescript": "5.6.3",
+		"vite": "4.2.0"
 	},
 	"type": "module",
 	"dependencies": {

ProblemSource/AdminApp/src/app.css

@@ -0,0 +1,107 @@
+body {
+	font-family: sans-serif;
+}
+input {
+	font-family: sans-serif;
+}
+
+button {
+	border: 1px solid #4ba7b2;
+	background: white;
+	color: #4ba7b2;
+	border-radius: 5px;
+	padding: 0px 10px;
+	height: 30px;
+	vertical-align: middle;
+}
+
+button.primary {
+	font-weight: bold;
+	background: #4ba7b2;
+	color: white;
+	border: none;
+}
+
+.inline-button {
+	background: none;
+	border: none;
+	display: inline;
+	cursor: pointer;
+}
+
+html {
+	box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
+}
+
+[data-tooltip] {
+	position: relative;
+	z-index: 2;
+	display: block;
+	color: red;
+}
+
+[data-tooltip]:before,
+[data-tooltip]:after {
+	visibility: hidden;
+	opacity: 0;
+	pointer-events: none;
+	transition: 0.2s ease-out;
+	transform: translate(-50%, 5px);
+}
+
+[data-tooltip]:before {
+	position: absolute;
+	bottom: 120%;
+	left: 50%;
+	margin-bottom: 5px;
+	padding: 7px;
+	width: 100%;
+	min-width: 170px;
+	max-width: 250px;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+	background-color: #000;
+	background-color: hsla(0, 0%, 20%, 0.9);
+	color: #fff;
+	content: attr(data-tooltip);
+	text-align: center;
+	font-size: 12px;
+	font-weight: normal;
+	line-height: 1.2;
+	transition: 0.2s ease-out;
+	white-space: break-spaces;
+}
+
+[data-tooltip]:after {
+	position: absolute;
+	bottom: 120%;
+	left: 50%;
+	width: 0;
+	border-top: 5px solid #000;
+	border-top: 5px solid hsla(0, 0%, 20%, 0.9);
+	border-right: 5px solid transparent;
+	border-left: 5px solid transparent;
+	content: ' ';
+	font-size: 0;
+	line-height: 0;
+}
+
+[data-tooltip]:hover:before,
+[data-tooltip]:hover:after {
+	visibility: visible;
+	opacity: 1;
+	transform: translate(-50%, 0);
+}
+
+[data-tooltip='false']:hover:before,
+[data-tooltip='false']:hover:after {
+	visibility: hidden;
+	opacity: 0;
+}

ProblemSource/AdminApp/src/components/helpWidget.svelte

@@ -0,0 +1,57 @@
+<script lang="ts" context="module">
+	import { writable } from 'svelte/store';
+	import { fade, scale } from 'svelte/transition';
+
+	export const showHelpPage = (path: string) => {
+		currentUrl.set(path);
+	};
+
+	export const closeHelpPage = () => {
+		currentUrl.set('');
+	};
+
+	const currentUrl = writable<string>('');
+</script>
+
+<script lang="ts">
+</script>
+
+{#if $currentUrl}
+	<div class="widget-container" in:scale out:fade>
+		<button class="close-button" on:click={() => closeHelpPage()}>X</button>
+		<div class="widget-content">
+			<iframe src={'./help/' + $currentUrl} />
+		</div>
+	</div>
+{/if}
+
+<style>
+	.widget-container {
+		position: fixed;
+		padding: 0px;
+		width: 100%;
+		max-width: 360px;
+		height: 100%;
+		max-height: 600px;
+		background-color: white;
+		border-radius: 10px;
+		box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.223);
+		right: 10px;
+		bottom: 10px;
+		overflow: hidden;
+	}
+	.widget-content {
+		width: 100%;
+		height: 100%;
+	}
+	.close-button {
+		position: absolute;
+		top: 5px;
+		right: 5px;
+	}
+	iframe {
+		border: none;
+		width: 100%;
+		height: 100%;
+	}
+</style>

ProblemSource/AdminApp/src/help/categories/en/faq.md

@@ -0,0 +1,4 @@
+---
+title: Frequently asked Questions
+posted: 'Dec 6, 2024'
+---

ProblemSource/AdminApp/src/help/categories/en/support.md

@@ -0,0 +1,4 @@
+---
+title: Support
+posted: 'Dec 6, 2024'
+---

ProblemSource/AdminApp/src/help/posts/en/about-the-project.md

@@ -0,0 +1,13 @@
+---
+title: About the project
+categories: faq
+posted: 'Dec 6, 2024'
+---
+
+We are pleased to announce that Vektor is being resurrected this spring with the help of research funding from a Wallenberg Foundation and based in the Karolinska Institutet.
+A group of selected teachers have received invitations to participate, because they have previously been successful users of the program. They can administer their training through the Teacher admin page.
+
+The app looks and works just like before - however you access it via login on a website (Training app page), not through an app installed through Apples App Store or Google Play.
+As before, it will contain the training schedule that we found best based on previous research. We will also vary a few percent of the time in order to make the app even better in the future through analyses.
+
+We will not save any personal data from the users of the training app, and the use of the app is approved by the Ethics Review Authority.

ProblemSource/AdminApp/src/help/posts/en/can-other-teachers-create-accounts.md

@@ -0,0 +1,8 @@
+---
+title: Can other teachers create accounts?
+categories: faq
+posted: 'Dec 6, 2024'
+---
+
+The training program is currently only available to a small group of invited users.
+We are investigating options for making it publicly available.

ProblemSource/AdminApp/src/help/posts/en/how-can-i-increase-my-training-quota.md

@@ -0,0 +1,7 @@
+---
+title: How can I increase my training quota?
+categories: faq
+posted: 'Dec 6, 2024'
+---
+
+For each training that has completed at least 5 training days, your training quota (the number of trainings you can create) increases by 1.

ProblemSource/AdminApp/src/help/posts/en/how-to-install

@@ -0,0 +1,9 @@
+---
+title: How do I install the training app
+categories: faq
+posted: 'Dec 6, 2024'
+---
+
+Currently, the training app is not available for installing from App Store or Google Play Store.
+You can access the app from a browser at Training app page
+In order to make the app feel more like a native app, you can enable Progressive Web App (PWA) mode by following these instructions: [https://mobilesyrup.com/2020/05/24/how-install-progressive-web-app-pwa-android-ios-pc-mac](https://mobilesyrup.com/2020/05/24/how-install-progressive-web-app-pwa-android-ios-pc-mac/)

ProblemSource/AdminApp/src/help/posts/en/personally-identifiable-information.md

@@ -0,0 +1,20 @@
+---
+title: Personally Identifiable Information (PII)
+categories: faq
+posted: 'Dec 6, 2024'
+---
+
+#### For all users (of training app and/or teacher admin)
+
+No IP addresses are stored on servers
+No tracking cookies are used
+All servers are located in the EU
+
+#### For training app users
+
+No email address or other PII is entered when creating a training account
+We don't provide any means for the user to input text
+
+#### For teacher admin users
+
+Email is stored plain-text, password is stored as salted/hashed