diff --git a/src/App/App.css b/src/App/App.css
index ff5395658cafb7494d8c7f7063c6f43c3370a2af..ea6c125cf04bf0082c7ddf6f03e99bd70430a8ed 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -3260,6 +3260,8 @@ a{
border-radius: 10px;
}
+
+
.detail-sideitem .sideitem{
padding-left: 10px !important;
}
@@ -3291,3 +3293,47 @@ a{
background-color: white;
height: 250px !important;
}
+
+.qabox .question-bubble:nth-child(2){
+ margin-bottom: 20px;
+ margin-right: 0px;
+ margin-left: auto;
+ border: 5px solid var(--accent-gradient-one-of-three);
+}
+.qabox .question-bubble:nth-child(1){
+ margin-bottom: 10px;
+ margin-left: 0px;
+ margin-right: auto;
+ border: 5px solid var(--accent-gradient-three-of-three);
+}
+
+.question-bubble{
+ border-radius: 10px;
+ padding: 20px;
+ width: fit-content;
+ max-width: 80%;
+ min-width: 20%;
+ position: relative;
+}
+
+.qabox .question-bubble:nth-child(2)::before{
+ bottom: 20px;
+ clip-path: polygon(0 0, 100% 100%, 0 75%);
+ left: calc(100%);
+ width: 20px;
+ height: 20px;
+ content: "";
+ position: absolute;
+ background: var(--accent-gradient-one-of-three);
+}
+
+.qabox .question-bubble:nth-child(1)::before{
+ bottom: 20px;
+ clip-path: polygon(0 100%, 100% 0, 100% 75%);
+ right: calc(100%);
+ width: 20px;
+ height: 20px;
+ content: "";
+ position: absolute;
+ background: var(--accent-gradient-three-of-three);
+}
\ No newline at end of file
diff --git a/src/components/Boxes.tsx b/src/components/Boxes.tsx
index 9bc42fcd6c0679d03b218be8f99038fdbccc74f1..274144b324244f1953631cb79253008574191f15 100644
--- a/src/components/Boxes.tsx
+++ b/src/components/Boxes.tsx
@@ -15,6 +15,41 @@ export function BulbBox({title, children}:{title: string, children: React.ReactN
)
}
+export function QaBox({q, a}:{q: string, a: React.ReactNode}){
+ return(
+ <div className="qabox">
+ <div className="question-bubble">
+ <div className="row">
+ {q}
+ </div>
+ </div>
+ <div className="question-bubble">
+ <div className="row">
+ {a}
+ </div>
+ </div>
+ </div>
+ )
+}
+export function SpecialQaBox({q, children}:{q: string, children: React.ReactNode}){
+ return(
+ <div className="qabox">
+ <div className="question-bubble">
+ <div className="row">
+ {q}
+ </div>
+ </div>
+ <div className="question-bubble">
+ <div className="row">
+ {children}
+ </div>
+ </div>
+ </div>
+ )
+}
+
+
+
export function InfoBox({title, children}:{title: string, children: React.ReactNode}){
return(
<aside className="hint-container info">
diff --git a/src/components/seclarations.ts b/src/components/seclarations.ts
index 759d2c90d81ac1f54e74325c32a1fd8f05d93a50..c0916ab0e2f82c5ebc978c4cbd21d53ec5821ae4 100644
--- a/src/components/seclarations.ts
+++ b/src/components/seclarations.ts
@@ -2,7 +2,7 @@
export * from './Buttons.tsx'
export * from './headings.tsx';
export * from './Sidebar.tsx';
-
+export * from './Boxes.tsx'
export * from './AOSs.tsx'
export * from './My-Timeline.tsx'
export * from './data/mapscr.ts'
diff --git a/src/contents/interviews.tsx b/src/contents/interviews.tsx
index 6bd78a24caa7aa1d9e4420cb67757248c4311f8d..993f2f49ac51c6fd5ec74186f8253a4729ef6ccf 100644
--- a/src/contents/interviews.tsx
+++ b/src/contents/interviews.tsx
@@ -1,4 +1,5 @@
import { ButtonOne } from "../components/Buttons";
+import { QaBox, SpecialQaBox } from "../components/Boxes";
export function Ints() {
@@ -32,10 +33,20 @@ export function Ints() {
</div>
</div>
<div className="col cycletab" id="maxinv1" style={{display: "block"}}>
- 1
+ <h2>Notes from the first interview</h2>
+ <br/>
+ <QaBox
+ q="Question"
+ a="Answer"
+ />
</div>
<div className="col cycletab" id="maxinv2" style={{display: "none"}}>
- 2
+ <h2>Notes from the second interview</h2>
+ <br/>
+ <QaBox
+ q="Question"
+ a="Answer"
+ />
</div>
</section>
<br/>
@@ -58,8 +69,13 @@ export function Ints() {
<div className="col">
</div>
</div>
- <div className="col cycletab">
- 1
+ <div className="col">
+ <h2>Notes from the interview</h2>
+ <br/>
+ <QaBox
+ q="Question"
+ a="Answer"
+ />
</div>
</section>
<br/>
@@ -81,8 +97,13 @@ export function Ints() {
<img className="interview-img" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
</div>
- <div className="col cycletab">
- 1
+ <div className="col">
+ <h2>Notes from the interview</h2>
+ <br/>
+ <QaBox
+ q="Question"
+ a="Answer"
+ />
</div>
</section>
<br/>
@@ -105,8 +126,13 @@ export function Ints() {
<div className="col">
</div>
</div>
- <div className="col cycletab">
- 1
+ <div className="col">
+ <h2>Notes from the interview</h2>
+ <br/>
+ <QaBox
+ q="Question"
+ a="Answer"
+ />
</div>
</section>
<br/>
@@ -128,8 +154,13 @@ export function Ints() {
<img className="interview-img" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
</div>
- <div className="col cycletab">
- 1
+ <div className="col">
+ <h2>Notes from the interview</h2>
+ <br/>
+ <QaBox
+ q="Question"
+ a="Answer"
+ />
</div>
</section>
<br/>
@@ -160,10 +191,20 @@ export function Ints() {
</div>
</div>
<div className="col cycletab" id="mattijsinv1" style={{display: "block"}}>
- 1
+ <h2>Notes from the first interview</h2>
+ <br/>
+ <QaBox
+ q="Question"
+ a="Answer"
+ />
</div>
<div className="col cycletab" id="mattijsinv2" style={{display: "none"}}>
- 2
+ <h2>Notes from the second interview</h2>
+ <br/>
+ <QaBox
+ q="Question"
+ a="Answer"
+ />
</div>
</section>
<br/>
@@ -187,9 +228,100 @@ export function Ints() {
<img className="interview-img" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
</div>
- <div className="col cycletab">
- 1
- </div>
+ <div className="col">
+ <h3>Notes from the interview</h3>
+ <br/>
+ {/* <QaBox
+ q="Question"
+ a="Answer"
+ /> */}
+ <QaBox
+ q="From what age do the patients come to you?"
+ a="The patients come to us at a very early age. It is always very difficult, for the parents in particular, to deal with the new situation. A definite diagnosis is made after 6 weeks at the latest. Once the diagnosis has been made, the whole family is genetically tested, i.e. the parents and siblings."
+ />
+ <QaBox
+ q="How long do they stay?"
+ a="When the children are discharged from hospital, they are immediately sent for physiotherapy. However, therapy often starts in hospital. These often also have CF outpatient clinics, such as the Bethel Clinic in Bielefeld."
+ />
+ <QaBox
+ q="How many patients do you treat?"
+ a="We currently have 8 children with cystic fibrosis in our medical practice, which is quite a lot. However, if you compare this number with other diseases, it is rather a small number. We have slightly more children with cystic fibrosis in our practice because we specialize in it, among other diseases."
+ />
+ <SpecialQaBox
+ q="What kind of exercises do you do?">
+ <p>We do a lot of breathing therapy. In any case, it is important to say that we have attended special training courses for CF that have shown us new techniques. In general, the same things are taught in training as 25 years ago, but unfortunately this doesn't help CF patients as well as the new techniques. The current gold standard is autogenous drainage according to Chevallier. This works very well! In general, the main problem is the mucus that cannot be removed. With autogenous drainage, the chest is compressed, which forces the mucus out. It's like cleaning the lungs from the inside, which works really well. It is also very important to inhale, whereby there are 3 different levels of salt content (0.9%, 3% or 6%). Children with CF always use at least 3% salt content.</p>
+ <p>Our general routine is as follows: </p>
+ <p>
+ <ol>
+ <li>wet inhalation, as moisture binds mucus</li>
+ <li>drainage to get mucus out of the lungs</li>
+ <li>antibiotics, now the medication can work best as the lungs are clean and dilated</li>
+ </ol>
+ </p>
+ <p>There are also so-called “magic pointsâ€. Compression of these points leads to the best possible ventilation of the lungs. There are special belts for compressing these points that patients can wear at home to help them breathe better. Older patients wear these belts during sport.</p>
+ </SpecialQaBox>
+ <QaBox
+ q="When does drainage start? "
+ a="We start drainage in newborns so that the mucus cannot settle as much. "
+ />
+ <QaBox
+ q="Are there special exercises that can also be done at home? "
+ a="Yes, the parents are instructed to do the exercises which we also do in our practice."
+ />
+ <QaBox
+ q="How often does the therapy take place? "
+ a="Therapy usually takes place once a week or every two weeks. Thanks to improved medication, the children affected are now in a much better position. The therapy has changed considerably over time and has improved significantly. Less and more fluid mucus makes it easier to cough up, which in turn increases the children's life expectancy. Sport and exercise play a central role in therapy and should be fun, as they must be carried out for life. From the age of 8 or 9, exercise such as cycling to school should be the norm. "
+ />
+ <QaBox
+ q="What would happen if no physiotherapy was performed? "
+ a="It is difficult to predict exactly what would happen if physiotherapy was not carried out, as there is no comparison group. There is no reason not to do the therapy. If children do not receive physiotherapy over a longer period of time, they often become more mucousy and their ventilation worsens. Specific therapy is absolutely necessary at the latest in the event of an infection. "
+ />
+ <QaBox
+ q="How do you measure success (in terms of lung function test, exercise, etc.)? "
+ a="The success of the therapy is measured subjectively by listening to and feeling the breathing and by observing the children's skin. An exact answer to the success measurement is difficult. A well-ventilated lung volume is indicated by a “full barrelâ€, while wheezing and vibrating indicate poor ventilation. Vegetative signs such as a white mouth-nose triangle indicate a high level of stress. In the clinic, lung function tests, CO2 measurements and “finger clip†tests are performed. However, children can sometimes try to influence the tests, so the results are not always reliable. "
+ />
+ <QaBox
+ q="Do the exercises bring relief or are they preventative for further complaints? "
+ a="The exercises serve both to relieve acute infections and to prevent further complaints. The fewer lung infections there are, the lower the likelihood of adhesions of mucus. "
+ />
+ <QaBox
+ q="Are there any tools to perform therapy? "
+ a="Devices such as the “flutter†or “cornet†are used to support exhalation. These devices look like a whistle with a metal ball inside. When exhaling, the ball moves and creates vibrations that loosen the mucus in the lungs. Such devices should be used by all children with lung diseases. "
+ />
+ <QaBox
+ q="What complaints do patients bring with them? "
+ a="Patients often have lung problems, dry lung mucosa and problems with the pancreas. The latter leads to poor metabolism, which is why those affected have to take enzyme therapeutics before eating. Children often have growth disorders due to a lack of food, which is why nutritional advice is essential. Some children also have problems with excessive perspiration, although this is less common. "
+ />
+ <QaBox
+ q="Are pancreatic complaints also treated by physiotherapists? "
+ a="Pancreatic complaints are rarely treated with physiotherapy, unless it is an inflammation. In such cases, the patient is admitted to a hospital. Massage or taping the intestines with kinesiology tape helps with constipation and works very well. "
+ />
+ <QaBox
+ q="Are there any special hygiene guidelines for you when working with cystic fibrosis patients? "
+ a="Hygiene guidelines are very important when working with cystic fibrosis patients. A distinction is made between children with and without infections (Pseudomonas). Regular nasal swabs are taken and only children with or without infections are treated in the practice on any given day. Ventilation, patients wearing masks while infected and disinfection of the facilities are essential. Children infected with multi-resistant germs are not allowed to enter the practice; in such cases, physiotherapists visit the patients' homes. "
+ />
+ <QaBox
+ q="Are the specific exercises customized? And if so, how do you know which therapy is the right one for which patient (based on laboratory values, tests, different mutation patterns...)? "
+ a="The exercises are individually adapted to the patient's current situation. Important criteria are the removal of mucus and ventilation of the lungs. Each therapist has their own approach and preferred exercises and techniques. "
+ />
+ <QaBox
+ q="Do patients always go to the same physiotherapist? "
+ a="If therapy goes well, patients stay with the same physiotherapist."
+ />
+ <QaBox
+ q="How many physiotherapists offer muco-therapy? "
+ a="The exact number of physiotherapists offering cystic fibrosis therapy is unknown. However, there are several child therapists in the region providing this therapy. "
+ />
+ <QaBox
+ q="How are the relatives educated? "
+ a="Educating relatives often begins in the maternity ward with a sweat test. Affected children are often recognizable due to poor food intake. In Gütersloh, where our office is located, all children are sent to Bethel, where they immediately receive CF care. Parents are often traumatized, as the children are severely ill despite often appearing healthy."
+ />
+ <QaBox
+ q="What are the limitations of individual medicine? "
+ a="The effectiveness of drugs can vary, and some are only approved from a certain age. Better medications can significantly enhance the quality of life and life expectancy. "
+ />
+ </div>
+
</section>
</>