Feat: Introduce knowledge retainment score to KnowledgeCheckCard

src/components/checks/DegradingScoreIndicator.tsx

@@ -0,0 +1,70 @@
+import Tooltip from '@/src/components/Shared/Tooltip'
+import { cn } from '@/src/lib/Shared/utils'
+
+/**
+ *
+ * @param knowledgeCheckScore A number between 0 and 100 where 100 means the user has likely retained 100% of the knowledge that he learned and had his exam about.
+ */
+export default function DegradingScoreIndicator({ knowledgeCheckScore, className }: { knowledgeCheckScore: number | undefined; className?: string }) {
+  // very well retained, well-retained, good overview, mediocre, basic, lost
+  let level: '95-100' | '80-95' | '60-80' | '40-60' | '20-40' | '0-20' | 'none' = 'none'
+
+  if (knowledgeCheckScore === undefined) level = 'none'
+  else if (knowledgeCheckScore >= 95) level = '95-100'
+  else if (knowledgeCheckScore >= 80) level = '80-95'
+  else if (knowledgeCheckScore >= 60) level = '60-80'
+  else if (knowledgeCheckScore >= 40) level = '40-60'
+  else if (knowledgeCheckScore >= 20) level = '20-40'
+  else if (knowledgeCheckScore >= 0) level = '0-20'
+
+  if (knowledgeCheckScore && knowledgeCheckScore > 100) knowledgeCheckScore = 100
+
+  let scoreMessage: string = ''
+
+  switch (level) {
+    case '95-100': {
+      scoreMessage = 'Almost 100% of the Knowledge is most likely still retained'
+      break
+    }
+    case '80-95': {
+      scoreMessage = 'Most of the Knowledge gained by this check is retained'
+      break
+    }
+    case '60-80': {
+      scoreMessage = 'Big Chunks of Knowledge are still retained'
+      break
+    }
+    case '40-60': {
+      scoreMessage = 'While some Knowledge parts are retained, a large part might have been forgotten'
+      break
+    }
+    case '20-40': {
+      scoreMessage = 'Most of the Knowledge delivered by this check is no longer retained'
+      break
+    }
+    case '0-20': {
+      scoreMessage = 'The contents and knowledge delivered by this check are no longer retained'
+      break
+    }
+    case 'none':
+  }
+
+  return (
+    <Tooltip content={scoreMessage} delay={100}>
+      <div
+        className={cn(
+          'relative bg-neutral-300 text-xs select-none dark:bg-neutral-500/80',
+
+          level === '0-20' && 'bg-[oklch(80%_0.25_30)] dark:bg-[oklch(40%_0.12_30)]',
+          level === '20-40' && 'bg-[oklch(88%_0.08_45)] dark:bg-[oklch(30%_0.09_30)]',
+          level === '40-60' && 'bg-[oklch(88%_0.08_110)] dark:bg-[oklch(32%_0.2_110)]',
+          level === '60-80' && 'bg-[oklch(85%_0.08_116)] dark:bg-[oklch(32%_0.2_116)]',
+          level === '80-95' && 'bg-[oklch(85%_0.10_155)] dark:bg-[oklch(35%_0.3_155)]',
+          level === '95-100' && 'bg-[oklch(85%_0.2_140)] dark:bg-[oklch(40%_0.37_155)]',
+          className,
+        )}>
+        <span className='flex items-center justify-center'>{knowledgeCheckScore ?? 0}</span>
+      </div>
+    </Tooltip>
+  )
+}

src/components/checks/KnowledgeCheckCard.tsx

@@ -4,16 +4,20 @@ import React from 'react'
 import { motion } from 'framer-motion'
 import { CrownIcon, LockIcon, UserPenIcon } from 'lucide-react'
 import KnowledgeCheckMenu from '@/src/components/checks/(hamburger-menu)/KnowledgeCheckMenu'
+import DegradingScoreIndicator from '@/src/components/checks/DegradingScoreIndicator'
 import { ShareKnowledgeCheckButton } from '@/src/components/checks/ShareKnowledgeCheckButton'
 import Card from '@/src/components/Shared/Card'
 import { InitialsIcon } from '@/src/components/Shared/InitialsIcon'
 import { useCurrentLocale, useScopedI18n } from '@/src/i18n/client-localization'
 import { useSession } from '@/src/lib/auth/client'
+import { computeKnowledgeRetainment } from '@/src/lib/checks/computeKnowledgeRetainment'
 import { cn } from '@/src/lib/Shared/utils'
 import { KnowledgeCheck } from '@/src/schemas/KnowledgeCheck'
 
 export function KnowledgeCheckCard(check: KnowledgeCheck) {
   const t = useScopedI18n('Components.KnowledgeCheckCard')
+  const retainmentScore = computeKnowledgeRetainment({ difficulty: check.difficulty })
+
   const { data } = useSession()
   const userId = data?.user.id
   const isCollaborator = userId ? check.collaborators.includes(userId) : false
@@ -31,7 +35,11 @@ export function KnowledgeCheckCard(check: KnowledgeCheck) {
       initial={{ opacity: 0, scale: 0.9 }}
       animate={{ opacity: 1, scale: 1 }}
       className={cn('relative flex h-full flex-col justify-between gap-10')}>
-      <div className='absolute top-3 right-4 left-4 flex items-center justify-between'>
+      <div className='absolute top-0 left-0 z-10 opacity-65'>
+        <DegradingScoreIndicator className='min-w-10 rounded-tl-md rounded-br-md p-3 px-3 text-xs' knowledgeCheckScore={retainmentScore} />
+      </div>
+      <div className='-mt-2 -mb-9 flex items-center justify-between'>
+        <div className='w-14' />
         <DisplayUserRole role={role} />
         <div className='flex gap-1'>
           <ShareKnowledgeCheckButton check={check} />

src/lib/checks/computeKnowledgeRetainment.ts

@@ -0,0 +1,13 @@
+import { KnowledgeCheck } from '@/src/schemas/KnowledgeCheck'
+
+/**
+ * This function computes the knowledge retainment score of a given user for a given check based on the difficulty and last practice / examination and the respective score.
+ * The more time has passed and the more difficult a check is the faster knowledge degrades --> thus lower retainment score.
+ * @param
+ */
+export function computeKnowledgeRetainment({ difficulty }: Pick<KnowledgeCheck, 'difficulty'>) {
+  const randomScore = Math.random() * 100
+  const skewedScore = randomScore * 1.7
+
+  return skewedScore > 100 ? 100 : Math.floor(skewedScore)
+}