From 195fcfc123a789276ba94c5ae92bb273acd48d71 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Mon, 23 Sep 2024 23:10:29 +0200
Subject: [PATCH] Quiz
---
src/App/App.css | 60 +++++++++++++++++++++++++++++++++++-
src/components/Buttons.tsx | 33 +++++++++++++++++++-
src/components/Quiz.tsx | 44 ++++++++++++++++++++++++++
src/contents/description.tsx | 18 ++++++++---
4 files changed, 149 insertions(+), 6 deletions(-)
create mode 100644 src/components/Quiz.tsx
diff --git a/src/App/App.css b/src/App/App.css
index f1cde9bf..6c52f5e3 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -414,7 +414,7 @@ margin-bottom: 10vw !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- font-size: 15vh;
+ font-size: 5rem;
letter-spacing:0.1em;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.3vw;
@@ -3770,3 +3770,61 @@ a{
#eng-sidebar a{
color: var(--text-primary) !important;
}
+
+
+.quiz-wrapper{
+ height: 95% !important;
+ display: flex;
+ align-items: center !important;
+ margin-bottom: 15px !important;
+ border-radius: 10px;
+ border-width: 3px;
+ border-style: dotted;
+ border-color: var(--text-primary);
+ padding: 10px;
+}
+
+.quiz-front, .quiz-back{
+ align-self: center;
+ height: 100% !important;
+ align-items: center;
+ text-align: center;
+}
+.quiz-text col{
+ align-content: stretch;
+ align-items: stretch;
+}
+.quiz-text{
+ align-content: stretch;
+ align-items: stretch;
+ margin: auto !important;
+ padding: 15px;
+ display: flex !important;
+ min-height: 40% !important;
+}
+.quiz-button-box{
+justify-content: center;
+height: min-content !important;
+}
+
+.quiz-button{
+ position: relative;
+ bottom: 0;
+ margin-top: auto !important;
+ align-self: baseline;
+ width: fit-content !important;
+ border-radius: 10px;
+ padding: 5px;
+ background-color: var(--very-light-purple);
+ border-color: var(--lightpurple);
+}
+
+.quiz-heading{
+ padding-top: 10px;
+ font-size: 2rem;
+ font-weight: bold;
+ letter-spacing:0.1em;
+ -webkit-text-fill-color: var(--very-light-purple);
+ -webkit-text-stroke-width: 2px;
+ -webkit-text-stroke-color: var(--text-primary);
+}
\ No newline at end of file
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index c17056e0..a2afabed 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Buttons.tsx
@@ -250,4 +250,35 @@ function scrollUpWithOffset() {
}
-
+export function ShowSolution({element}: {element: string}){
+
+ return(
+ <button onClick={flip(element)} className="quiz-button">Show solution</button>
+ )
+}
+
+export function HideSolution({element}: {element: string}){
+ return(
+ <button onClick={flipBack(element)} className="quiz-button">Return to question</button>
+ )
+}
+
+function flip(element: string){
+ const flipp = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+ let elementToHide = document.getElementById("front-"+element);
+ (elementToHide as HTMLElement).style.display = "none";
+ let elementToFind = document.getElementById("back-"+element);
+ (elementToFind as HTMLElement).style.display = "block";
+ }
+ return flipp;
+}
+
+function flipBack(element: string){
+ const flippback = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+ let elementToHide = document.getElementById("back-"+element);
+ (elementToHide as HTMLElement).style.display = "none";
+ let elementToFind = document.getElementById("front-"+element);
+ (elementToFind as HTMLElement).style.display = "block";
+ }
+ return flippback;
+}
diff --git a/src/components/Quiz.tsx b/src/components/Quiz.tsx
new file mode 100644
index 00000000..6d760d97
--- /dev/null
+++ b/src/components/Quiz.tsx
@@ -0,0 +1,44 @@
+import { HideSolution, ShowSolution } from "./Buttons";
+import { Hpopart } from "./Headings";
+
+
+interface QuizProps{
+ name: string;
+ front: string;
+ back: string
+}
+
+export function QuizQuestion({name, front, back}: QuizProps){
+
+ return(
+ <div className="quiz-wrapper">
+ <div className="col quiz-front" id={`front-${name}`}>
+ {QuizHeading}
+ <div className="row quiz-text">
+ <div className="col">
+ {front}
+ </div>
+ </div>
+ <br/>
+ <div className="row quiz-button-box">
+ <ShowSolution element={name}/>
+ </div>
+ </div>
+ <div className="col quiz-back" id={`back-${name}`} style={{display: "none"}}>
+ {QuizHeading}
+ <div className="row quiz-text">
+ <div className="col">
+ {back}
+ </div>
+ </div>
+ <br/>
+ <div className="row quiz-button-box">
+ <HideSolution element={name}/>
+ </div>
+ </div>
+ </div>
+ )
+}
+
+
+const QuizHeading = <div className="col"><div className="quiz-heading">Quiz Question!</div></div>
\ No newline at end of file
diff --git a/src/contents/description.tsx b/src/contents/description.tsx
index f8a27b2f..cbd7cabb 100644
--- a/src/contents/description.tsx
+++ b/src/contents/description.tsx
@@ -15,6 +15,7 @@ import { stringToSlug } from "../utils";
import { symptomdata, SymptomDatensatz } from "../data/symptom-data";
import { drugdata, DrugDatensatz } from "../data/drug-data";
import { useTabNavigation } from "../utils/TabNavigation";
+import { QuizQuestion } from "../components/Quiz";
export function Description() {
useTabNavigation();
@@ -66,18 +67,27 @@ export function Description() {
</div>
</Subesction>
<Subesction title="ΔF508" id="Cystic Fibrosis3">
- <p>A multitude of mutations in the CFTR gene, exceeding 1,000, are responsible for the development of cystic
+ <p>A multitude of mutations in the CFTR gene, exceeding 1,000, are responsible for the development of cystic
fibrosis. The most prevalent variant is F508del, observed in approximately 70% of affected individuals of
Caucasian descent in Canada, Northern Europe, and the United States<SupScrollLink label="14"/>. It is estimated that around 90% of
the European population and people of European heritage with cystic fibrosis carry at least one F508del
variant <SupScrollLink label="15"/><sup>,</sup><SupScrollLink label="16"/>. Analyses have demonstrated that the F508del mutation originated in Western Europe at least
5,000 years ago <SupScrollLink label="15"/>. </p>
- <p>It is a deletion of the three nucleotides "CTT" at position 508, which removes the phenylalanine residue
+ <p>It is a deletion of the three nucleotides "CTT" at position 508, which removes the phenylalanine residue
without causing a frameshift. This deletion leads to defects in the kinetic and thermodynamic folding
of the NBD1 domain <SupScrollLink label="16"/>. However, this not only leads to misfolding of CFTR but also to defects in
trafficking and premature degradation, resulting in reduced surface expression of CFTR <SupScrollLink label="17"/>. </p>
-
- <img src="https://static.igem.wiki/teams/5247/charts-maps/cfper10-000.png"/>
+
+ <div className="row">
+ <div className="col">
+ <img src="https://static.igem.wiki/teams/5247/charts-maps/cfper10-000.png"/>
+ </div>
+ <div className="col-4">
+ <QuizQuestion name="schreibweise" front="What do the codes F508del and ΔF508 stand for?" back="they..."/>
+ </div>
+ </div>
+
+
</Subesction>
<Subesction title="Symptoms" id="Cystic Fibrosis4">
<p>Text about symptoms</p>
--
GitLab