got help toggle

This commit is contained in:
2024-09-18 13:31:22 -06:00
parent 49c5ae789a
commit 69043fa36d
3 changed files with 73 additions and 28 deletions

View File

@@ -213,6 +213,7 @@ this is a matching question
toggle help
</button>
</div>
<section class="p-2">
@if (quizContext.Quiz != null)
{

View File

@@ -19,6 +19,47 @@ import { getCourseUrl } from "@/services/urlUtils";
import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
import Link from "next/link";
const helpString = `QUESTION REFERENCE
---
Points: 2
this is a question?
*a) correct
b) not correct
---
points: 1
question goes here
[*] correct
[ ] not correct
[] not correct
---
the points default to 1?
*a) true
b) false
---
Markdown is supported
- like
- this
- list
[*] true
[ ] false
---
This is a one point essay question
essay
---
points: 4
this is a short answer question
short_answer
---
points: 4
the underscore is optional
short answer
---
this is a matching question
^ left answer - right dropdown
^ other thing - another option`;
export default function EditQuiz({
moduleName,
quizName,
@@ -61,25 +102,27 @@ export default function EditQuiz({
}, [moduleName, quiz, quizName, quizText, updateQuizMutation]);
return (
<>
{showHelp && <div className="w-72"> help here</div>}
<div className="h-full flex flex-col">
<div className="columns-2 min-h-0 flex-1">
<div className="flex-1 h-full">
<MonacoEditor value={quizText} onChange={setQuizText} />
</div>
<div className="h-full">
<div className="text-red-300">{error && error}</div>
<QuizPreview quiz={quiz} />
</div>
<div className="h-full flex flex-col w-full">
<div className={"min-h-0 flex flex-row "}>
{showHelp && (
<pre className="flex-shrink max-w-96">
<code>{helpString}</code>
</pre>
)}
<div className="flex-1 h-full">
<MonacoEditor value={quizText} onChange={setQuizText} />
</div>
<div className="flex-1 h-full">
<div className="text-red-300">{error && error}</div>
<QuizPreview quiz={quiz} />
</div>
<QuizButtons
moduleName={moduleName}
quizName={quizName}
toggleHelp={() => setShowHelp((h) => !h)}
/>
</div>
</>
<QuizButtons
moduleName={moduleName}
quizName={quizName}
toggleHelp={() => setShowHelp((h) => !h)}
/>
</div>
);
}

View File

@@ -23,17 +23,18 @@ export default async function RootLayout({
return (
<html lang="en">
<head>
</head>
<body className="bg-slate-900 h-screen p-1 text-slate-300">
<MyToaster />
<Suspense>
<Providers>
<HydrationBoundary state={dehydratedState}>
{children}
</HydrationBoundary>
</Providers>
</Suspense>
<head></head>
<body className="flex justify-center">
<div className="bg-slate-900 h-screen p-1 text-slate-300 w-full">
<MyToaster />
<Suspense>
<Providers>
<HydrationBoundary state={dehydratedState}>
{children}
</HydrationBoundary>
</Providers>
</Suspense>
</div>
</body>
</html>
);