Skip to content

Commit 6d15e03

Browse files
seohyonkimSeo KimZethson
authored
Multiple Choice Question and Flip Card for Quizzes (#325)
* restructure the preamble sentences. * working on quiz feature. wip. * multiple choice questions and flip cards using pure html for both online book and PDF * change colour, add explanation for wrong answers on MCQ. Explanation for wrong answers don't show in PDF * skip quiz in PDF * remove the background colour in dark mode * Move quiz Signed-off-by: Lukas Heumos <lukas.heumos@posteo.net> * move quiz code into src directory * revamp existing quizzes * exclude gene_regulatory_atac from pre_commit.yaml * Simplif Signed-off-by: Lukas Heumos <lukas.heumos@posteo.net> --------- Signed-off-by: Lukas Heumos <lukas.heumos@posteo.net> Co-authored-by: Seo Kim <kim@cip.ifi.lmu.de> Co-authored-by: Lukas Heumos <lukas.heumos@posteo.net>
1 parent 9bc9116 commit 6d15e03

File tree

13 files changed

+3920
-438
lines changed

13 files changed

+3920
-438
lines changed

‎.pre-commit-config.yaml‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,16 @@ repos:
1515
hooks:
1616
- id: ruff
1717
args: [--fix, --exit-non-zero-on-fix, --unsafe-fixes]
18+
exclude: |
19+
(?x)^(
20+
jupyter-book/chromatin_accessibility/gene_regulatory_networks_atac.ipynb
21+
)$
1822
- id: ruff-format
1923
exclude: |
2024
(?x)^(
2125
jupyter-book/conditions/differential_gene_expression.ipynb|
2226
.mypy_cache|
2327
.pytest_cache|
24-
dist
28+
dist|
29+
jupyter-book/chromatin_accessibility/gene_regulatory_networks_atac.ipynb
2530
)$

‎jupyter-book/air_repertoire/ir_profiling.ipynb‎

Lines changed: 277 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3223,25 +3223,282 @@
32233223
"id": "e7b77012",
32243224
"metadata": {},
32253225
"source": [
3226-
"## Quiz\n",
3227-
"\n",
3228-
"Where does the high variability of AIRs stem from?\n",
3229-
"- \\+ Junctional diversity adds random nucleotides.\n",
3230-
"- Peripheral diversity motivates rapid amino acid switches specific to the host organ.\n",
3231-
"- \\+ Combinatorial diversity of different gene segments.\n",
3232-
"- Inherited diversity genetically encodes multiple AIRs.\n",
3233-
"\n",
3234-
"What properties does a productive AIR have?\n",
3235-
"- \\+ It spans over the V- to the J-gene with an CDR3 regions contained.\n",
3236-
"- It contains a stop codon in the D-gene.\n",
3237-
"- There exist multiple different sequences for the same AIR chains.\n",
3238-
"- \\+ It contains a start codon in the leading region.\n",
3226+
"## Quiz"
3227+
]
3228+
},
3229+
{
3230+
"cell_type": "code",
3231+
"execution_count": 2,
3232+
"id": "35d2d491",
3233+
"metadata": {
3234+
"tags": [
3235+
"remove_input"
3236+
]
3237+
},
3238+
"outputs": [
3239+
{
3240+
"data": {
3241+
"text/html": [
3242+
"\n",
3243+
" <style>\n",
3244+
" div#flip-card .output.text_html {\n",
3245+
" background-color: transparent;\n",
3246+
" }\n",
3247+
" .flip-card-q1 {\n",
3248+
" background-color: transparent;\n",
3249+
" width: 350px;\n",
3250+
" height: 200px;\n",
3251+
" perspective: 1000px;\n",
3252+
" display: inline-block;\n",
3253+
" margin: 10px;\n",
3254+
" text-align: center;\n",
3255+
" padding: 10px;\n",
3256+
" }\n",
3257+
" .flip-card-inner-q1 {\n",
3258+
" position: relative;\n",
3259+
" width: 100%;\n",
3260+
" height: 100%;\n",
3261+
" text-align: center;\n",
3262+
" transition: transform 0.6s;\n",
3263+
" transform-style: preserve-3d;\n",
3264+
" transform-origin: center;\n",
3265+
" }\n",
3266+
" .flip-card-q1:hover .flip-card-inner-q1 {\n",
3267+
" transform: rotateY(180deg);\n",
3268+
" }\n",
3269+
" .flip-card-front-q1, .flip-card-back-q1 {\n",
3270+
" position: absolute;\n",
3271+
" width: 100%;\n",
3272+
" height: 100%;\n",
3273+
" min-height: 200px;\n",
3274+
" backface-visibility: hidden;\n",
3275+
" display: flex;\n",
3276+
" align-items: center;\n",
3277+
" justify-content: center;\n",
3278+
" font-weight: bold;\n",
3279+
" color: white;\n",
3280+
" padding: 20px;\n",
3281+
" border-radius: 15px;\n",
3282+
" box-sizing: border-box;\n",
3283+
" overflow: hidden;\n",
3284+
" text-align: center;\n",
3285+
" }\n",
3286+
" .flip-card-front-q1 {\n",
3287+
" background-color: #3965a3;\n",
3288+
" font-size: 20px;\n",
3289+
" }\n",
3290+
" .flip-card-back-q1 {\n",
3291+
" background-color: #a8d480;\n",
3292+
" transform: rotateY(180deg);\n",
3293+
" font-size: 13px;\n",
3294+
" }\n",
3295+
" </style>\n",
3296+
"\n",
3297+
" <div class=\"flip-card-q1\">\n",
3298+
" <div class=\"flip-card-inner-q1\">\n",
3299+
" <div class=\"flip-card-front-q1\">\n",
3300+
" Where does the high variability of AIRs stem from?\n",
3301+
" </div>\n",
3302+
" <div class=\"flip-card-back-q1\">\n",
3303+
" Junctional diversity adds random nucleotides. Peripheral diversity motivates rapid amino acid switches specific to the host organ. Combinatorial diversity of different gene segments. Inherited diversity genetically encodes multiple AIRs.\n",
3304+
" </div>\n",
3305+
" </div>\n",
3306+
" </div>\n",
3307+
" <noscript>\n",
3308+
" <p><strong>Q:</strong> Where does the high variability of AIRs stem from?</p>\n",
3309+
" <p><strong>Answer:</strong> Junctional diversity adds random nucleotides. Peripheral diversity motivates rapid amino acid switches specific to the host organ. Combinatorial diversity of different gene segments. Inherited diversity genetically encodes multiple AIRs.</p>\n",
3310+
" </noscript>\n",
3311+
" "
3312+
],
3313+
"text/plain": [
3314+
"<IPython.core.display.HTML object>"
3315+
]
3316+
},
3317+
"metadata": {},
3318+
"output_type": "display_data"
3319+
},
3320+
{
3321+
"data": {
3322+
"text/html": [
3323+
"\n",
3324+
" <style>\n",
3325+
" div#flip-card .output.text_html {\n",
3326+
" background-color: transparent;\n",
3327+
" }\n",
3328+
" .flip-card-q2 {\n",
3329+
" background-color: transparent;\n",
3330+
" width: 350px;\n",
3331+
" height: 200px;\n",
3332+
" perspective: 1000px;\n",
3333+
" display: inline-block;\n",
3334+
" margin: 10px;\n",
3335+
" text-align: center;\n",
3336+
" padding: 10px;\n",
3337+
" }\n",
3338+
" .flip-card-inner-q2 {\n",
3339+
" position: relative;\n",
3340+
" width: 100%;\n",
3341+
" height: 100%;\n",
3342+
" text-align: center;\n",
3343+
" transition: transform 0.6s;\n",
3344+
" transform-style: preserve-3d;\n",
3345+
" transform-origin: center;\n",
3346+
" }\n",
3347+
" .flip-card-q2:hover .flip-card-inner-q2 {\n",
3348+
" transform: rotateY(180deg);\n",
3349+
" }\n",
3350+
" .flip-card-front-q2, .flip-card-back-q2 {\n",
3351+
" position: absolute;\n",
3352+
" width: 100%;\n",
3353+
" height: 100%;\n",
3354+
" min-height: 200px;\n",
3355+
" backface-visibility: hidden;\n",
3356+
" display: flex;\n",
3357+
" align-items: center;\n",
3358+
" justify-content: center;\n",
3359+
" font-weight: bold;\n",
3360+
" color: white;\n",
3361+
" padding: 20px;\n",
3362+
" border-radius: 15px;\n",
3363+
" box-sizing: border-box;\n",
3364+
" overflow: hidden;\n",
3365+
" text-align: center;\n",
3366+
" }\n",
3367+
" .flip-card-front-q2 {\n",
3368+
" background-color: #3965a3;\n",
3369+
" font-size: 20px;\n",
3370+
" }\n",
3371+
" .flip-card-back-q2 {\n",
3372+
" background-color: #a8d480;\n",
3373+
" transform: rotateY(180deg);\n",
3374+
" font-size: 20px;\n",
3375+
" }\n",
3376+
" </style>\n",
3377+
"\n",
3378+
" <div class=\"flip-card-q2\">\n",
3379+
" <div class=\"flip-card-inner-q2\">\n",
3380+
" <div class=\"flip-card-front-q2\">\n",
3381+
" What properties does a productive AIR have?\n",
3382+
" </div>\n",
3383+
" <div class=\"flip-card-back-q2\">\n",
3384+
" It spans over the V- to the J-gene with a CDR3 regions contained. It contains a start codon in the leading region.\n",
3385+
" </div>\n",
3386+
" </div>\n",
3387+
" </div>\n",
3388+
" <noscript>\n",
3389+
" <p><strong>Q:</strong> What properties does a productive AIR have?</p>\n",
3390+
" <p><strong>Answer:</strong> It spans over the V- to the J-gene with a CDR3 regions contained. It contains a start codon in the leading region.</p>\n",
3391+
" </noscript>\n",
3392+
" "
3393+
],
3394+
"text/plain": [
3395+
"<IPython.core.display.HTML object>"
3396+
]
3397+
},
3398+
"metadata": {},
3399+
"output_type": "display_data"
3400+
},
3401+
{
3402+
"data": {
3403+
"text/html": [
3404+
"\n",
3405+
" <style>\n",
3406+
" div#flip-card .output.text_html {\n",
3407+
" background-color: transparent;\n",
3408+
" }\n",
3409+
" .flip-card-q3 {\n",
3410+
" background-color: transparent;\n",
3411+
" width: 350px;\n",
3412+
" height: 200px;\n",
3413+
" perspective: 1000px;\n",
3414+
" display: inline-block;\n",
3415+
" margin: 10px;\n",
3416+
" text-align: center;\n",
3417+
" padding: 10px;\n",
3418+
" }\n",
3419+
" .flip-card-inner-q3 {\n",
3420+
" position: relative;\n",
3421+
" width: 100%;\n",
3422+
" height: 100%;\n",
3423+
" text-align: center;\n",
3424+
" transition: transform 0.6s;\n",
3425+
" transform-style: preserve-3d;\n",
3426+
" transform-origin: center;\n",
3427+
" }\n",
3428+
" .flip-card-q3:hover .flip-card-inner-q3 {\n",
3429+
" transform: rotateY(180deg);\n",
3430+
" }\n",
3431+
" .flip-card-front-q3, .flip-card-back-q3 {\n",
3432+
" position: absolute;\n",
3433+
" width: 100%;\n",
3434+
" height: 100%;\n",
3435+
" min-height: 200px;\n",
3436+
" backface-visibility: hidden;\n",
3437+
" display: flex;\n",
3438+
" align-items: center;\n",
3439+
" justify-content: center;\n",
3440+
" font-weight: bold;\n",
3441+
" color: white;\n",
3442+
" padding: 20px;\n",
3443+
" border-radius: 15px;\n",
3444+
" box-sizing: border-box;\n",
3445+
" overflow: hidden;\n",
3446+
" text-align: center;\n",
3447+
" }\n",
3448+
" .flip-card-front-q3 {\n",
3449+
" background-color: #3965a3;\n",
3450+
" font-size: 20px;\n",
3451+
" }\n",
3452+
" .flip-card-back-q3 {\n",
3453+
" background-color: #a8d480;\n",
3454+
" transform: rotateY(180deg);\n",
3455+
" font-size: 20px;\n",
3456+
" }\n",
3457+
" </style>\n",
3458+
"\n",
3459+
" <div class=\"flip-card-q3\">\n",
3460+
" <div class=\"flip-card-inner-q3\">\n",
3461+
" <div class=\"flip-card-front-q3\">\n",
3462+
" What cells should be identified for potential filtering?\n",
3463+
" </div>\n",
3464+
" <div class=\"flip-card-back-q3\">\n",
3465+
" Cells with high count of AIR sequence reads, cells with incomplete AIR information, etc.\n",
3466+
" </div>\n",
3467+
" </div>\n",
3468+
" </div>\n",
3469+
" <noscript>\n",
3470+
" <p><strong>Q:</strong> What cells should be identified for potential filtering?</p>\n",
3471+
" <p><strong>Answer:</strong> Cells with high count of AIR sequence reads, cells with incomplete AIR information, etc.</p>\n",
3472+
" </noscript>\n",
3473+
" "
3474+
],
3475+
"text/plain": [
3476+
"<IPython.core.display.HTML object>"
3477+
]
3478+
},
3479+
"metadata": {},
3480+
"output_type": "display_data"
3481+
}
3482+
],
3483+
"source": [
3484+
"%run ../src/lib.py\n",
32393485
"\n",
3240-
"What cells should be identified for potential filtering?\n",
3241-
"- Cells with a high count of AIR sequence reads.\n",
3242-
"- \\+ Cells with incomplete AIR information.\n",
3243-
"- \\+ Cells with multiple AIRs indicating doublets.\n",
3244-
"- Cells with specific motifs in the CDR3 region."
3486+
"flip_card(\n",
3487+
" \"q1\",\n",
3488+
" \"Where does the high variability of AIRs stem from?\",\n",
3489+
" \"Junctional diversity adds random nucleotides. Peripheral diversity motivates rapid amino acid switches specific to the host organ. Combinatorial diversity of different gene segments. Inherited diversity genetically encodes multiple AIRs.\",\n",
3490+
" back_font_size=13,\n",
3491+
")\n",
3492+
"flip_card(\n",
3493+
" \"q2\",\n",
3494+
" \"What properties does a productive AIR have?\",\n",
3495+
" \"It spans over the V- to the J-gene with a CDR3 regions contained. It contains a start codon in the leading region.\",\n",
3496+
")\n",
3497+
"flip_card(\n",
3498+
" \"q3\",\n",
3499+
" \"What cells should be identified for potential filtering?\",\n",
3500+
" \"Cells with high count of AIR sequence reads, cells with incomplete AIR information, etc.\",\n",
3501+
")"
32453502
]
32463503
},
32473504
{
@@ -3265,7 +3522,7 @@
32653522
],
32663523
"metadata": {
32673524
"kernelspec": {
3268-
"display_name": "Python 3.10.5 64-bit",
3525+
"display_name": "book",
32693526
"language": "python",
32703527
"name": "python3"
32713528
},
@@ -3279,12 +3536,7 @@
32793536
"name": "python",
32803537
"nbconvert_exporter": "python",
32813538
"pygments_lexer": "ipython3",
3282-
"version": "3.10.8"
3283-
},
3284-
"vscode": {
3285-
"interpreter": {
3286-
"hash": "e7370f93d1d0cde622a1f8e1c04877d8463912d04d973331ad4851f04de6915a"
3287-
}
3539+
"version": "3.11.8"
32883540
}
32893541
},
32903542
"nbformat": 4,

0 commit comments

Comments
 (0)