-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
1911 lines (1725 loc) · 112 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
import './style.css'
import roseIcon from './rose.svg'
import githubIcon from './github.svg'
import {select} from 'd3';
import {slider, densityPlot, boxPlot, beeswarmPlot, populationPrevalencePlot} from './plots';
const icareLitApp = document.querySelector('#app');
const pyodideWorker = new Worker(new URL('./webWorker.js', import.meta.url), { type: 'module' });
const minMortalityAge = 1;
const maxMortalityAge = 80;
const minDiseaseIncidenceAge = 0;
const maxDiseaseIncidenceAge = 84;
const numYearRisk = 5;
const minAge = Math.max(minMortalityAge, minDiseaseIncidenceAge);
const maxAge = Math.min(maxMortalityAge, maxDiseaseIncidenceAge) - numYearRisk;
icareLitApp.innerHTML = `
<div id="header" class="mx-auto max-w-7xl px-4 py-2 sm:px-6 sm:py-4 lg:px-8 bg-slate-900 rounded-b-lg">
<div class="flex items-center justify-between">
<div class="flex justify-start gap-2">
<div class="flex items-center">
<img src="${roseIcon}" class="h-12 w-12 sm:h-16 sm:w-16 gap-2 logo vanilla" alt="rose logo" />
</div>
<div class="min-w-0 flex-1">
<h2 class="text-2xl font-bold leading-7 text-white sm:text-3xl sm:tracking-tight">iCARE-Lit</h2>
<p class="py-2 pr-2 text-sm sm:text-base text-white">Absolute risk estimator for breast cancer</p>
</div>
</div>
<div class="flex md:mt-0 md:ml-4 shrink-0">
<a title="Source code" href="https://github.com/jeyabbalas/icare-lit">
<img src="${githubIcon}" class="h-10 w-10 sm:h-12 sm:w-12 fill-current" alt="github logo" />
</a>
</div>
</div>
</div>
<div id="info" class="mx-auto max-w-7xl px-4 py-2 sm:px-6 sm:py-4 lg:px-8">
<div id="info-privacy" class="flex p-4 text-sm text-green-800 border border-green-300 rounded-lg bg-green-50" role="alert">
<svg aria-hidden="true" class="flex-shrink-0 inline w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
</svg>
<span class="sr-only">Data privacy notice</span>
<div>
<span class="font-medium">Privacy notice</span>: All data is maintained and all calculations are performed within your browser. No data is sent to and no calculations are performed by any server. <a class="font-bold underline" href="https://github.com/jeyabbalas/icare-lit">This app's code</a> is open source and can be inspected by anyone.
</div>
</div>
<div id="info-usage" class="flex p-4 mt-2 text-sm text-yellow-800 border border-yellow-300 rounded-lg bg-yellow-50" role="alert">
<svg aria-hidden="true" class="flex-shrink-0 inline w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
</svg>
<span class="sr-only">App usage notice</span>
<div>
<span class="font-medium">Usage notice</span>: This app is intended for educational purposes only. It is not a substitute for professional medical advice, diagnosis, or treatment. Always seek the advice of your physician or other qualified health provider with any questions you may have regarding a medical condition. Never disregard professional medical advice or delay in seeking it because of something you have read on this app.
</div>
</div>
</div>
<div id="form" class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 border rounded-lg">
<form id="form-icare-lit" autocomplete="off" class="space-y-8 divide-y divide-gray-200">
<div id="form-questionnaire" class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
<div class="space-y-6 sm:space-y-5 pt-2 sm:pt-4">
<div id="questionnaire-heading">
<h3 class="text-lg leading-6 font-semibold text-gray-900">Questionnaire</h3>
<p class="mt-1 max-w-2xl text-sm text-gray-500">Please answer the following questions to the best of your knowledge.</p>
</div>
<div id="questions" class="space-y-6 sm:space-y-5">
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<label for="name" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Enter a name or an alias.</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<input type="text" name="name" id="name" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:max-w-xs sm:text-sm" value="Jane Doe" required>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<label for="age" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">What is your age?</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<input type="number" name="age" id="age" min="${minAge}" max="${maxAge}" step="1" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:max-w-xs sm:text-sm" required>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<div>
<label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Please specify your sex assigned at birth</label>
<p class="text-sm text-gray-500"><span class="font-medium">Note</span>: The current version of this tool is developed for <em>females</em> only.</p>
</div>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<fieldset class="mt-4">
<legend class="sr-only">Sex type</legend>
<div class="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
<div class="flex items-center">
<input id="female" name="sex" type="radio" value="female" checked class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="female" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Female</label>
</div>
<div class="flex items-center">
<input id="male" name="sex" type="radio" value="male" class="h-4 w-4 border-gray-300 bg-gray-100 text-slate-600 focus:ring-slate-600" disabled>
<label for="male" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Male <span class="font-normal text-gray-500">(option currently unavailable)</span></label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<div>
<label for="race-ethnicity" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Which race/ethnicity group do you most closely associate with?</label>
<p class="text-sm text-gray-500"><span class="font-medium">Note</span>: The current version of the model is developed for <em>non-Hispanic, white</em> populations only. Future versions will be developed for other populations.</p>
</div>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<select id="race-ethnicity" name="race-ethnicity" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:max-w-xs sm:text-sm" required>
<option disabled selected value> -- select an option -- </option>
<option disabled>American Indian or Alaska Native</option>
<option disabled>Asian</option>
<option disabled>Black or African American</option>
<option disabled>Hispanic</option>
<option disabled>Native Hawaiian or Other Pacific Islander</option>
<option>Non-Hispanic White</option>
<option disabled>Other</option>
</select>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<div>
<label for="weight" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">How much do you weigh without your clothes or shoes on?</label>
<p class="text-sm text-gray-500">If you are pregnant, how much did you weigh before your pregnancy?</p>
</div>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="flex max-w-lg rounded-md shadow-sm sm:max-w-xs">
<input type="number" name="weight" id="weight" min="0" max="500" class="block w-full min-w-0 flex-1 rounded-none rounded-l-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-slate-600 sm:text-sm sm:leading-6" placeholder="0.00" aria-describedby="weight-units">
<select id="weight-unit" name="weight-unit" class="block rounded-r-md border-0 py-1.5 text-gray-500 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-slate-600 sm:text-sm sm:leading-6">
<option value="lbs">lbs.</option>
<option value="kgs">kgs.</option>
</select>
</div>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<div>
<label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">How tall are you with your shoes off?</label>
<p class="text-sm text-gray-500">Please select the unit and enter your height.</p>
</div>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="space-y-2">
<div class="flex max-w-lg rounded-md shadow-sm sm:max-w-xs">
<select id="height-unit" name="height-unit" class="block w-full rounded-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-slate-600 sm:text-sm sm:leading-6">
<option value="ft-in">feet/inches</option>
<option value="m">meters</option>
<option value="cm">centimeters</option>
</select>
</div>
<div id="height-ft-in-container">
<div class="flex max-w-lg rounded-md shadow-sm sm:max-w-xs">
<label for="height-feet" class="sr-only">Feet portion of the height</label>
<input type="number" name="height-feet" min="2" max="8" step="1" class="block w-full min-w-0 flex-1 rounded-none rounded-l-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-slate-600 sm:text-sm sm:leading-6" placeholder="0" aria-describedby="height-feet">
<span id="height-feet" class="inline-block w-[70px] inline-flex items-center rounded-r-md border border-l-0 border-gray-300 px-5 text-gray-500 sm:text-sm">feet</span>
</div>
<div class="flex max-w-lg rounded-md shadow-sm sm:max-w-xs">
<label for="height-inches" class="sr-only">Inches portion of the height</label>
<input type="number" name="height-inches" min="0" max="11" step="1" class="block w-full min-w-0 flex-1 rounded-none rounded-l-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-slate-600 sm:text-sm sm:leading-6" placeholder="0" aria-describedby="height-inches">
<span id="height-inches" class="inline-block w-[70px] inline-flex items-center rounded-r-md border border-l-0 border-gray-300 px-3 text-gray-500 sm:text-sm">inches</span>
</div>
</div>
<div id="height-m-container" class="hidden">
<div class="flex max-w-lg rounded-md shadow-sm sm:max-w-xs">
<label for="height-m" class="sr-only">Height in meters</label>
<input type="number" name="height-m" min="0" max="3" step="0.01" class="block w-full min-w-0 flex-1 rounded-none rounded-l-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-slate-600 sm:text-sm sm:leading-6" placeholder="0.00" aria-describedby="height-m">
<span id="height-m" class="inline-block w-[70px] inline-flex items-center rounded-r-md border border-l-0 border-gray-300 px-3 text-gray-500 sm:text-sm">meters</span>
</div>
</div>
<div id="height-cm-container" class="hidden">
<div class="flex max-w-lg rounded-md shadow-sm sm:max-w-xs">
<label for="height-cm" class="sr-only">Height in centimeters</label>
<input type="number" name="height-cm" min="0" max="300" step="0.1" class="block w-full min-w-0 flex-1 rounded-none rounded-l-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-slate-600 sm:text-sm sm:leading-6" placeholder="0.0" aria-describedby="height-cm">
<span id="height-cm" class="inline-block w-[95px] inline-flex items-center rounded-r-md border border-l-0 border-gray-300 px-3 text-gray-500 sm:text-sm">centimeters</span>
</div>
</div>
</div>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<label for="menarche" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">How old were you when you had your first menstrual period?</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<input type="number" name="menarche" id="menarche" min="${minAge}" max="${maxAge}" step="1" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:max-w-xs sm:text-sm">
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<div>
<label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Have your periods completely stopped?</label>
<p class="text-sm text-gray-500">By <em>completely stopped</em>, we mean that you have gone at least 6 months without having a period, and you are not pregnant or using any form of hormonal contraception.</p>
</div>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<fieldset class="mt-4">
<legend class="sr-only">Menopause status</legend>
<div class="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
<div class="flex items-center">
<input id="menopause-yes" name="menopause" type="radio" value="1" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="menopause-yes" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Yes</label>
</div>
<div class="flex items-center">
<input id="menopause-no" name="menopause" type="radio" value="0" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="menopause-no" class="ml-3 block text-sm font-medium leading-6 text-gray-900">No</label>
</div>
<div class="flex items-center">
<input id="menopause-unknown" name="menopause" type="radio" value="" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="menopause-unknown" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Don't know</label>
</div>
</div>
</fieldset>
</div>
</div>
<div id="age-menopause-container" class="hidden space-y-6 sm:space-y-5">
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<label for="age-menopause" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">How old were you when you had your last menstrual period?</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<input type="number" name="age-menopause" id="age-menopause" min="${minAge}" max="${maxAge}" step="1" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:max-w-xs sm:text-sm">
</div>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<div>
<label for="num-pregnancies" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">How many times have you been pregnant?</label>
<p class="text-sm text-gray-500">Please include all live births, as well as pregnancies that ended as stillbirths, miscarriages, ectopic or tubal pregnancies, or termination. Twins, triplets, or higher multiples count as one pregnancy.</p>
</div>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<input type="number" name="num-pregnancies" id="num-pregnancies" min="0" max="25" step="1" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:max-w-xs sm:text-sm">
</div>
</div>
<div id="children-container" class="hidden space-y-6 sm:space-y-5">
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Have you ever had any children?</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<fieldset class="mt-4">
<legend class="sr-only">Had children status</legend>
<div class="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
<div class="flex items-center">
<input id="parous-yes" name="parous" type="radio" value="1" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="parous-yes" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Yes</label>
</div>
<div class="flex items-center">
<input id="parous-no" name="parous" type="radio" value="0" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="parous-no" class="ml-3 block text-sm font-medium leading-6 text-gray-900">No</label>
</div>
<div class="flex items-center">
<input id="parous-unknown" name="parous" type="radio" value="" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="parous-unknown" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Don't know</label>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div id="births-container" class="hidden space-y-6 sm:space-y-5">
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<label for="parity" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">How many children have you had?</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<input type="number" name="parity" id="parity" min="1" max="25" step="1" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:max-w-xs sm:text-sm">
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<label for="age-first-child-birth" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">How old were you when you had your first child?</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<input type="number" name="age-first-child-birth" id="age-first-child-birth" min="${minAge}" max="${maxAge}" step="1" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:max-w-xs sm:text-sm">
</div>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Have you ever used menopausal hormone treatment prescribed by a doctor or other health professional?</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<fieldset class="mt-4">
<legend class="sr-only">Menopausal hormone treatment use status</legend>
<div class="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
<div class="flex items-center">
<input id="hormone-treatment-yes" name="hormone-treatment" type="radio" value="1" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="hormone-treatment-yes" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Yes</label>
</div>
<div class="flex items-center">
<input id="hormone-treatment-no" name="hormone-treatment" type="radio" value="0" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="hormone-treatment-no" class="ml-3 block text-sm font-medium leading-6 text-gray-900">No</label>
</div>
<div class="flex items-center">
<input id="hormone-treatment-unknown" name="hormone-treatment" type="radio" value="" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="hormone-treatment-unknown" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Don't know</label>
</div>
</div>
</fieldset>
</div>
</div>
<div id="hormone-treatment-current-container" class="hidden space-y-6 sm:space-y-5">
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Do you currently use menopausal hormone treatment?</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<fieldset class="mt-4">
<legend class="sr-only">Current menopausal hormone treatment use status</legend>
<div class="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
<div class="flex items-center">
<input id="hormone-treatment-current-yes" name="hormone-treatment-current" type="radio" value="1" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="hormone-treatment-current-yes" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Yes</label>
</div>
<div class="flex items-center">
<input id="hormone-treatment-current-no" name="hormone-treatment-current" type="radio" value="0" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="hormone-treatment-current-no" class="ml-3 block text-sm font-medium leading-6 text-gray-900">No</label>
</div>
<div class="flex items-center">
<input id="hormone-treatment-current-unknown" name="hormone-treatment-current" type="radio" value="" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="hormone-treatment-current-unknown" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Don't know</label>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div id="hormone-treatment-type-container" class="hidden space-y-6 sm:space-y-5">
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">What type of menopausal hormone treatment do you currently use?</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<fieldset class="mt-4">
<legend class="sr-only">Menopausal hormone treatment type</legend>
<div class="space-y-4">
<div class="flex items-center">
<input id="hormone-treatment-type-e" name="hormone-treatment-type" type="radio" value="1" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="hormone-treatment-type-e" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Estrogen prescription hormone only.</label>
</div>
<div class="flex items-center">
<input id="hormone-treatment-type-c" name="hormone-treatment-type" type="radio" value="0" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="hormone-treatment-type-c" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Combined estrogen plus progestin prescription hormones.</label>
</div>
<div class="flex items-center">
<input id="hormone-treatment-type-unknown" name="hormone-treatment-type" type="radio" value="" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="hormone-treatment-type-unknown" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Don't know.</label>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<div>
<label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Have you ever used any hormonal contraceptive medication or device?</label>
<p class="text-sm text-gray-500">This includes combined oral contraceptive pills containing both estrogen and progesterone/progestin (commonly called <em>the pill</em>), progesterone-only or progestin-only contraceptive pills (commonly called the <em>mini-pill</em>), <em>Norplant</em> (inserted under the skin of your upper arm, lasts several years), <em>Depo-provera</em> (birth control shot given once every three months), Vaginal ring (such as <em>Nuva Ring</em>, inserted vaginally each month), Birth control patch (such as <em>Ortho Evra</em>, applied to the skin), Hormonal IUD (such as <em>Mirena intrauterine device</em>), or other hormones prescribed by a health professional.</p>
</div>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<fieldset class="mt-4">
<legend class="sr-only">Hormonal contraceptive use status</legend>
<div class="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
<div class="flex items-center">
<input id="hormonal-contraceptive-yes" name="hormonal-contraceptive" type="radio" value="1" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="hormonal-contraceptive-yes" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Yes</label>
</div>
<div class="flex items-center">
<input id="hormonal-contraceptive-no" name="hormonal-contraceptive" type="radio" value="0" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="hormonal-contraceptive-no" class="ml-3 block text-sm font-medium leading-6 text-gray-900">No</label>
</div>
<div class="flex items-center">
<input id="hormonal-contraceptive-unknown" name="hormonal-contraceptive" type="radio" value="" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="hormonal-contraceptive-unknown" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Don't know</label>
</div>
</div>
</fieldset>
</div>
</div>
<div id="hormonal-contraceptive-container" class="hidden space-y-6 sm:space-y-5">
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Do you currently use any hormonal contraceptive medication or device?</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<fieldset class="mt-4">
<legend class="sr-only">Current hormonal contraceptive use status</legend>
<div class="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
<div class="flex items-center">
<input id="hormonal-contraceptive-current-yes" name="hormonal-contraceptive-current" type="radio" value="1" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="hormonal-contraceptive-current-yes" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Yes</label>
</div>
<div class="flex items-center">
<input id="hormonal-contraceptive-current-no" name="hormonal-contraceptive-current" type="radio" value="0" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="hormonal-contraceptive-current-no" class="ml-3 block text-sm font-medium leading-6 text-gray-900">No</label>
</div>
<div class="flex items-center">
<input id="hormonal-contraceptive-current-unknown" name="hormonal-contraceptive-current" type="radio" value="" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="hormonal-contraceptive-current-unknown" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Don't know</label>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">During your entire life, have you had at least 12 drinks of any kind of alcoholic beverage?</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<fieldset class="mt-4">
<legend class="sr-only">Alcohol use status</legend>
<div class="space-y-4">
<div class="flex items-center">
<input id="alcohol-use-never" name="alcohol-use" type="radio" value="never" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="alcohol-use-never" class="ml-3 block text-sm font-medium leading-6 text-gray-900">No.</label>
</div>
<div class="flex items-center">
<input id="alcohol-use-former" name="alcohol-use" type="radio" value="former" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="alcohol-use-former" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Yes, but I no longer drink alcohol. (former drinker)</label>
</div>
<div class="flex items-center">
<input id="alcohol-use-current" name="alcohol-use" type="radio" value="current" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="alcohol-use-current" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Yes, I still drink alcohol. (current drinker)</label>
</div>
<div class="flex items-center">
<input id="alcohol-use-unknown" name="alcohol-use" type="radio" value="" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="alcohol-use-unknown" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Don't know.</label>
</div>
</div>
</fieldset>
</div>
</div>
<div id="alcohol-container" class="hidden space-y-6 sm:space-y-5">
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<label id="alcohol-type-label" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Please select any of the following alcoholic beverages that you have had in the past 12 months.</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<fieldset class="mt-4">
<legend class="sr-only">Alcohol types</legend>
<div class="space-y-5">
<div class="flex h-6 items-center">
<input id="alcohol-type-wine" name="alcohol-type" type="checkbox" value="wine" class="h-4 w-4 rounded border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="alcohol-type-wine" class="ml-3 text-sm font-medium leading-6 text-gray-900">Glass of wine</label>
</div>
<div class="flex h-6 items-center">
<input id="alcohol-type-blc" name="alcohol-type" type="checkbox" value="blc" class="h-4 w-4 rounded border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="alcohol-type-blc" class="ml-3 text-sm font-medium leading-6 text-gray-900">Glass of beer/lager/cider</label>
</div>
<div class="flex h-6 items-center">
<input id="alcohol-type-beer" name="alcohol-type" type="checkbox" value="beer" class="h-4 w-4 rounded border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="alcohol-type-beer" class="ml-3 text-sm font-medium leading-6 text-gray-900">Bottle of beer</label>
</div>
<div class="relative flex items-start">
<div class="flex h-6 items-center">
<input id="alcohol-type-pop" aria-describedby="pop-description" name="alcohol-type" type="checkbox" value="pop" class="h-4 w-4 rounded border-gray-300 text-slate-600 focus:ring-slate-600">
</div>
<div class="ml-3">
<label for="alcohol-type-pop" class="text-sm font-medium leading-6 text-gray-900">Alcoholic pop beverages</label>
<p id="pop-description" class="text-sm text-gray-500">Such as wine coolers, hard soda, spiked seltzer (sparkling water), Smirnoff Ice, malt liquor, or pre-mixed cocktails.</p>
</div>
</div>
<div class="flex h-6 items-center">
<input id="alcohol-type-shots" name="alcohol-type" type="checkbox" value="shots" class="h-4 w-4 rounded border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="alcohol-type-shots" class="ml-3 text-sm font-medium leading-6 text-gray-900">Shots of liquor</label>
</div>
<div class="flex h-6 items-center">
<input id="alcohol-type-unknown" name="alcohol-type" type="checkbox" value="" class="h-4 w-4 rounded border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="alcohol-type-unknown" class="ml-3 text-sm font-medium leading-6 text-gray-900">Don't know</label>
</div>
</div>
</fieldset>
</div>
</div>
<div id="wine-container" class="hidden space-y-6 sm:space-y-5">
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<div>
<label id="wine-freq-label" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Over the past 12 months, how often did you usually drink wine?</label>
<p class="text-sm text-gray-500">This includes any kind of wine or wine cooler.</p>
</div>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<fieldset class="mt-4">
<legend class="sr-only">Wine consumption frequencies</legend>
<div class="space-y-4">
<div class="flex items-center">
<input id="wine-freq-lt-one-month" name="wine-freq" type="radio" value="lt-once-a-month" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="wine-freq-lt-one-month" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Less than once a month.</label>
</div>
<div class="flex items-center">
<input id="wine-freq-once-per-month" name="wine-freq" type="radio" value="once-per-month" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="wine-freq-once-per-month" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Once a month.</label>
</div>
<div class="flex items-center">
<input id="wine-freq-2-3-per-month" name="wine-freq" type="radio" value="2-3-per-month" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="wine-freq-2-3-per-month" class="ml-3 block text-sm font-medium leading-6 text-gray-900">2-3 times a month.</label>
</div>
<div class="flex items-center">
<input id="wine-freq-1-2-per-week" name="wine-freq" type="radio" value="1-2-per-week" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="wine-freq-1-2-per-week" class="ml-3 block text-sm font-medium leading-6 text-gray-900">1-2 times a week.</label>
</div>
<div class="flex items-center">
<input id="wine-freq-3-4-per-week" name="wine-freq" type="radio" value="3-4-per-week" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="wine-freq-3-4-per-week" class="ml-3 block text-sm font-medium leading-6 text-gray-900">3-4 times a week.</label>
</div>
<div class="flex items-center">
<input id="wine-freq-5-6-per-week" name="wine-freq" type="radio" value="5-6-per-week" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="wine-freq-5-6-per-week" class="ml-3 block text-sm font-medium leading-6 text-gray-900">5-6 times a week.</label>
</div>
<div class="flex items-center">
<input id="wine-freq-daily" name="wine-freq" type="radio" value="daily" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="wine-freq-daily" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Every day.</label>
</div>
<div class="flex items-center">
<input id="wine-freq-unknown" name="wine-freq" type="radio" value="unknown" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="wine-freq-unknown" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Don't know.</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<div>
<label id="wine-serving-label" for="wine-serving" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Over the past 12 months, on the days that you drank wine, how many servings did you drink per day?</label>
<p class="text-sm text-gray-500">A serving of wine is 5 ounces.</p>
</div>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="flex max-w-lg rounded-md shadow-sm sm:max-w-xs">
<input type="number" name="wine-serving" id="wine-serving" min="1" step="1" class="block w-full min-w-0 flex-1 rounded-none rounded-l-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-slate-600 sm:text-sm sm:leading-6" placeholder="0" aria-describedby="wine-serving-units">
<span id="wine-serving-units" class="inline-flex items-center rounded-r-md border border-l-0 border-gray-300 px-3 text-gray-500 sm:text-sm">glass(es)</span>
</div>
</div>
</div>
</div>
<div id="blc-container" class="hidden space-y-6 sm:space-y-5">
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<label id="blc-freq-label" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Over the past 12 months, how often did you usually drink glasses of beer/lager/cider?</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<fieldset class="mt-4">
<legend class="sr-only">Beer, lager, and cider consumption frequencies</legend>
<div class="space-y-4">
<div class="flex items-center">
<input id="blc-freq-lt-one-month" name="blc-freq" type="radio" value="lt-once-a-month" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="blc-freq-lt-one-month" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Less than once a month.</label>
</div>
<div class="flex items-center">
<input id="blc-freq-once-per-month" name="blc-freq" type="radio" value="once-per-month" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="blc-freq-once-per-month" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Once a month.</label>
</div>
<div class="flex items-center">
<input id="blc-freq-2-3-per-month" name="blc-freq" type="radio" value="2-3-per-month" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="blc-freq-2-3-per-month" class="ml-3 block text-sm font-medium leading-6 text-gray-900">2-3 times a month.</label>
</div>
<div class="flex items-center">
<input id="blc-freq-1-2-per-week" name="blc-freq" type="radio" value="1-2-per-week" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="blc-freq-1-2-per-week" class="ml-3 block text-sm font-medium leading-6 text-gray-900">1-2 times a week.</label>
</div>
<div class="flex items-center">
<input id="blc-freq-3-4-per-week" name="blc-freq" type="radio" value="3-4-per-week" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="blc-freq-3-4-per-week" class="ml-3 block text-sm font-medium leading-6 text-gray-900">3-4 times a week.</label>
</div>
<div class="flex items-center">
<input id="blc-freq-5-6-per-week" name="blc-freq" type="radio" value="5-6-per-week" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="blc-freq-5-6-per-week" class="ml-3 block text-sm font-medium leading-6 text-gray-900">5-6 times a week.</label>
</div>
<div class="flex items-center">
<input id="blc-freq-daily" name="blc-freq" type="radio" value="daily" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="blc-freq-daily" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Every day.</label>
</div>
<div class="flex items-center">
<input id="blc-freq-unknown" name="blc-freq" type="radio" value="unknown" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="blc-freq-unknown" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Don't know.</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<div>
<label id="blc-serving-label" for="blc-serving" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Over the past 12 months, on the days that you drank beer/lager/cider, how many servings did you drink per day?</label>
<p class="text-sm text-gray-500">A serving of beer/lager/cider is a 12-ounce container.</p>
</div>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="flex max-w-lg rounded-md shadow-sm sm:max-w-xs">
<input type="number" name="blc-serving" id="blc-serving" min="1" step="1" class="block w-full min-w-0 flex-1 rounded-none rounded-l-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-slate-600 sm:text-sm sm:leading-6" placeholder="0" aria-describedby="blc-serving-units">
<span id="blc-serving-units" class="inline-flex items-center rounded-r-md border border-l-0 border-gray-300 px-3 text-gray-500 sm:text-sm">glass(es)</span>
</div>
</div>
</div>
</div>
<div id="beer-container" class="hidden space-y-6 sm:space-y-5">
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<label id="beer-freq-label" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Over the past 12 months, how often did you usually drink bottles of beer?</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<fieldset class="mt-4">
<legend class="sr-only">Beer consumption frequencies</legend>
<div class="space-y-4">
<div class="flex items-center">
<input id="beer-freq-lt-one-month" name="beer-freq" type="radio" value="lt-once-a-month" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="beer-freq-lt-one-month" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Less than once a month.</label>
</div>
<div class="flex items-center">
<input id="beer-freq-once-per-month" name="beer-freq" type="radio" value="once-per-month" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="beer-freq-once-per-month" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Once a month.</label>
</div>
<div class="flex items-center">
<input id="beer-freq-2-3-per-month" name="beer-freq" type="radio" value="2-3-per-month" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="beer-freq-2-3-per-month" class="ml-3 block text-sm font-medium leading-6 text-gray-900">2-3 times a month.</label>
</div>
<div class="flex items-center">
<input id="beer-freq-1-2-per-week" name="beer-freq" type="radio" value="1-2-per-week" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="beer-freq-1-2-per-week" class="ml-3 block text-sm font-medium leading-6 text-gray-900">1-2 times a week.</label>
</div>
<div class="flex items-center">
<input id="beer-freq-3-4-per-week" name="beer-freq" type="radio" value="3-4-per-week" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="beer-freq-3-4-per-week" class="ml-3 block text-sm font-medium leading-6 text-gray-900">3-4 times a week.</label>
</div>
<div class="flex items-center">
<input id="beer-freq-5-6-per-week" name="beer-freq" type="radio" value="5-6-per-week" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="beer-freq-5-6-per-week" class="ml-3 block text-sm font-medium leading-6 text-gray-900">5-6 times a week.</label>
</div>
<div class="flex items-center">
<input id="beer-freq-daily" name="beer-freq" type="radio" value="daily" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="beer-freq-daily" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Every day.</label>
</div>
<div class="flex items-center">
<input id="beer-freq-unknown" name="beer-freq" type="radio" value="unknown" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="beer-freq-unknown" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Don't know.</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<div>
<label id="beer-serving-label" for="beer-serving" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Over the past 12 months, on the days that you drank beer, how many servings did you drink per day?</label>
<p class="text-sm text-gray-500">A serving of beer is a 12-ounce container.</p>
</div>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="flex max-w-lg rounded-md shadow-sm sm:max-w-xs">
<input type="number" name="beer-serving" id="beer-serving" min="1" step="1" class="block w-full min-w-0 flex-1 rounded-none rounded-l-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-slate-600 sm:text-sm sm:leading-6" placeholder="0" aria-describedby="beer-serving-units">
<span id="beer-serving-units" class="inline-flex items-center rounded-r-md border border-l-0 border-gray-300 px-3 text-gray-500 sm:text-sm">bottle(s)</span>
</div>
</div>
</div>
</div>
<div id="pop-container" class="hidden space-y-6 sm:space-y-5">
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<div>
<label id="pop-freq-label" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Over the past 12 months, how often did you usually drink alcoholic pop beverages?</label>
<p class="text-sm text-gray-500">These includes wine coolers, hard soda, spiked seltzer (sparkling water), Smirnoff Ice, malt liquor, or pre-mixed cocktails.</p>
</div>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<fieldset class="mt-4">
<legend class="sr-only">Alcoholic pop beverage consumption consumption frequencies</legend>
<div class="space-y-4">
<div class="flex items-center">
<input id="pop-freq-lt-one-month" name="pop-freq" type="radio" value="lt-once-a-month" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="pop-freq-lt-one-month" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Less than once a month.</label>
</div>
<div class="flex items-center">
<input id="pop-freq-once-per-month" name="pop-freq" type="radio" value="once-per-month" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="pop-freq-once-per-month" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Once a month.</label>
</div>
<div class="flex items-center">
<input id="pop-freq-2-3-per-month" name="pop-freq" type="radio" value="2-3-per-month" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="pop-freq-2-3-per-month" class="ml-3 block text-sm font-medium leading-6 text-gray-900">2-3 times a month.</label>
</div>
<div class="flex items-center">
<input id="pop-freq-1-2-per-week" name="pop-freq" type="radio" value="1-2-per-week" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="pop-freq-1-2-per-week" class="ml-3 block text-sm font-medium leading-6 text-gray-900">1-2 times a week.</label>
</div>
<div class="flex items-center">
<input id="pop-freq-3-4-per-week" name="pop-freq" type="radio" value="3-4-per-week" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="pop-freq-3-4-per-week" class="ml-3 block text-sm font-medium leading-6 text-gray-900">3-4 times a week.</label>
</div>
<div class="flex items-center">
<input id="pop-freq-5-6-per-week" name="pop-freq" type="radio" value="5-6-per-week" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="pop-freq-5-6-per-week" class="ml-3 block text-sm font-medium leading-6 text-gray-900">5-6 times a week.</label>
</div>
<div class="flex items-center">
<input id="pop-freq-daily" name="pop-freq" type="radio" value="daily" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="pop-freq-daily" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Every day.</label>
</div>
<div class="flex items-center">
<input id="pop-freq-unknown" name="pop-freq" type="radio" value="unknown" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="pop-freq-unknown" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Don't know.</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<div>
<label id="pop-serving-label" for="pop-serving" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Over the past 12 months, on the days that you drank alcoholic pop beverages, how many servings did you drink per day?</label>
<p class="text-sm text-gray-500">A serving of beer, hard cider, wine coolers, 'hard soda', spiked sparkling water, or malt liquor is a 12-ounce container. A serving of liquor or mixed drinks is one shot or 1.5 ounces of liquor.</p>
</div>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="flex max-w-lg rounded-md shadow-sm sm:max-w-xs">
<input type="number" name="pop-serving" id="pop-serving" min="1" step="1" class="block w-full min-w-0 flex-1 rounded-none rounded-l-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-slate-600 sm:text-sm sm:leading-6" placeholder="0" aria-describedby="pop-serving-units">
<span id="pop-serving-units" class="inline-flex items-center rounded-r-md border border-l-0 border-gray-300 px-3 text-gray-500 sm:text-sm">beverage(s)</span>
</div>
</div>
</div>
</div>
<div id="shots-container" class="hidden space-y-6 sm:space-y-5">
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<label id="shots-freq-label" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Over the past 12 months, how often did you usually take shots of liquor?</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<fieldset class="mt-4">
<legend class="sr-only">Shots of liquor consumption frequencies</legend>
<div class="space-y-4">
<div class="flex items-center">
<input id="shots-freq-lt-one-month" name="shots-freq" type="radio" value="lt-once-a-month" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="shots-freq-lt-one-month" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Less than once a month.</label>
</div>
<div class="flex items-center">
<input id="shots-freq-once-per-month" name="shots-freq" type="radio" value="once-per-month" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="shots-freq-once-per-month" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Once a month.</label>
</div>
<div class="flex items-center">
<input id="shots-freq-2-3-per-month" name="shots-freq" type="radio" value="2-3-per-month" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="shots-freq-2-3-per-month" class="ml-3 block text-sm font-medium leading-6 text-gray-900">2-3 times a month.</label>
</div>
<div class="flex items-center">
<input id="shots-freq-1-2-per-week" name="shots-freq" type="radio" value="1-2-per-week" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="shots-freq-1-2-per-week" class="ml-3 block text-sm font-medium leading-6 text-gray-900">1-2 times a week.</label>
</div>
<div class="flex items-center">
<input id="shots-freq-3-4-per-week" name="shots-freq" type="radio" value="3-4-per-week" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="shots-freq-3-4-per-week" class="ml-3 block text-sm font-medium leading-6 text-gray-900">3-4 times a week.</label>
</div>
<div class="flex items-center">
<input id="shots-freq-5-6-per-week" name="shots-freq" type="radio" value="5-6-per-week" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="shots-freq-5-6-per-week" class="ml-3 block text-sm font-medium leading-6 text-gray-900">5-6 times a week.</label>
</div>
<div class="flex items-center">
<input id="shots-freq-daily" name="shots-freq" type="radio" value="daily" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="shots-freq-daily" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Every day.</label>
</div>
<div class="flex items-center">
<input id="shots-freq-unknown" name="shots-freq" type="radio" value="unknown" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="shots-freq-unknown" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Don't know.</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<div>
<label id="shot-serving-label" for="shot-serving" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Over the past 12 months, on the days that you drank liquor, how many servings did you drink per day?</label>
<p class="text-sm text-gray-500">A serving of liquor or mixed drinks is one shot or 1.5 ounces of liquor.</p>
</div>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="flex max-w-lg rounded-md shadow-sm sm:max-w-xs">
<input type="number" name="shot-serving" id="shot-serving" min="1" step="1" class="block w-full min-w-0 flex-1 rounded-none rounded-l-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-slate-600 sm:text-sm sm:leading-6" placeholder="0" aria-describedby="shot-serving-units">
<span id="shot-serving-units" class="inline-flex items-center rounded-r-md border border-l-0 border-gray-300 px-3 text-gray-500 sm:text-sm">shot(s)</span>
</div>
</div>
</div>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Has a doctor or other health professional ever told you that you have or had fibrocystic breast or benign breast disease?</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<fieldset class="mt-4">
<legend class="sr-only">History of benign breast disease status</legend>
<div class="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
<div class="flex items-center">
<input id="benign-breast-disease-yes" name="benign-breast-disease" type="radio" value="1" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="benign-breast-disease-yes" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Yes</label>
</div>
<div class="flex items-center">
<input id="benign-breast-disease-no" name="benign-breast-disease" type="radio" value="0" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="benign-breast-disease-no" class="ml-3 block text-sm font-medium leading-6 text-gray-900">No</label>
</div>
<div class="flex items-center">
<input id="benign-breast-disease-unknown" name="benign-breast-disease" type="radio" value="" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="benign-breast-disease-unknown" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Don't know</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Has your biological mother, father, sister, or brother ever been diagnosed with breast cancer?</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<fieldset class="mt-4">
<legend class="sr-only">Family history of breast cancer status</legend>
<div class="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
<div class="flex items-center">
<input id="family-history-yes" name="family-history" type="radio" value="1" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="family-history-yes" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Yes</label>
</div>
<div class="flex items-center">
<input id="family-history-no" name="family-history" type="radio" value="0" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="family-history-no" class="ml-3 block text-sm font-medium leading-6 text-gray-900">No</label>
</div>
<div class="flex items-center">
<input id="family-history-unknown" name="family-history" type="radio" value="" class="h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-600">
<label for="family-history-unknown" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Don't know</label>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
<div id="form-buttons" class="py-2 sm:py-4">
<div class="flex justify-center gap-2">
<button id="reset-btn" type="reset" class="rounded-md border border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2">Reset</button>
<button id="submit-btn" type="submit" class="inline-flex justify-center rounded-md border border-transparent bg-slate-800 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2">Estimate risk</button>
</div>
</div>
</form>
</div>
<div id="form-results-divider" class="pt-4">
<div class="relative">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div class="w-full border-t border-gray-300 mx-4 sm:mx-6 lg:mx-8"></div>
</div>
<div class="relative flex justify-center">
<span class="bg-white px-2 text-lg text-gray-500">iCARE-Lit results</span>
</div>
</div>
</div>
<div class="mx-auto max-w-7xl mt-4 px-4 sm:px-6 lg:px-8 mb-4 sm:mb-6 lg:mb-8 border rounded-lg">
<div id="results" class="w-full mt-4 px-4 sm:px-6 lg:px-8"></div>
</div>
`
const heightUnitDropdown = document.getElementById('height-unit');
const heightFtInContainer = document.getElementById('height-ft-in-container');
const heightMContainer = document.getElementById('height-m-container');
const heightCmContainer = document.getElementById('height-cm-container');
const ageAtMenopauseContainer = document.getElementById('age-menopause-container');
const childrenContainer = document.getElementById('children-container');
const birthsContainer = document.getElementById('births-container');
const hormoneTreatmentCurrentContainer = document.getElementById('hormone-treatment-current-container');
const hormoneTreatmentTypeContainer = document.getElementById('hormone-treatment-type-container');
const hormonalContraceptiveContainer = document.getElementById('hormonal-contraceptive-container');
const alcoholContainer = document.getElementById('alcohol-container');
const wineContainer = document.getElementById('wine-container');
const blcContainer = document.getElementById('blc-container');
const beerContainer = document.getElementById('beer-container');
const popContainer = document.getElementById('pop-container');
const shotsContainer = document.getElementById('shots-container');
const submitButton = document.getElementById("submit-btn");
const resultsDiv = document.getElementById("results");
heightUnitDropdown.addEventListener('change', (event) => {
if (event.target.value === 'ft-in') {
heightFtInContainer.classList.remove('hidden');
heightMContainer.classList.add('hidden');
heightCmContainer.classList.add('hidden');
} else if (event.target.value === 'm') {
heightFtInContainer.classList.add('hidden');
heightMContainer.classList.remove('hidden');
heightCmContainer.classList.add('hidden');
} else if (event.target.value === 'cm') {
heightFtInContainer.classList.add('hidden');
heightMContainer.classList.add('hidden');
heightCmContainer.classList.remove('hidden');
}
});
document.getElementById('menopause-yes').addEventListener('change', (event) => {
if (event.target.checked) {
ageAtMenopauseContainer.classList.remove('hidden');
}
});
document.getElementById('menopause-no').addEventListener('change', (event) => {
if (event.target.checked && !ageAtMenopauseContainer.classList.contains('hidden')) {
ageAtMenopauseContainer.classList.add('hidden');
}
});
document.getElementById('menopause-unknown').addEventListener('change', (event) => {
if (event.target.checked && !ageAtMenopauseContainer.classList.contains('hidden')) {
ageAtMenopauseContainer.classList.add('hidden');
}
});
document.getElementById('num-pregnancies').addEventListener('input', (event) => {
if (parseInt(event.target.value) === 0 || event.target.value === '') {
if (!childrenContainer.classList.contains('hidden')) {
childrenContainer.classList.add('hidden');
}
if (!birthsContainer.classList.contains('hidden')) {
birthsContainer.classList.add('hidden');
}
} else {
childrenContainer.classList.remove('hidden');
}
});
document.getElementById('parous-yes').addEventListener('change', (event) => {
if (event.target.checked) {
birthsContainer.classList.remove('hidden');
}
});
document.getElementById('parous-no').addEventListener('change', (event) => {
if (event.target.checked && !birthsContainer.classList.contains('hidden')) {
birthsContainer.classList.add('hidden');
}
});
document.getElementById('parous-unknown').addEventListener('change', (event) => {
if (event.target.checked && !birthsContainer.classList.contains('hidden')) {
birthsContainer.classList.add('hidden');
}
});
document.getElementById('hormone-treatment-yes').addEventListener('change', (event) => {
if (event.target.checked) {
hormoneTreatmentCurrentContainer.classList.remove('hidden');
}
});
document.getElementById('hormone-treatment-no').addEventListener('change', (event) => {
if (event.target.checked && !hormoneTreatmentCurrentContainer.classList.contains('hidden')) {
hormoneTreatmentCurrentContainer.classList.add('hidden');
}
});
document.getElementById('hormone-treatment-unknown').addEventListener('change', (event) => {
if (event.target.checked && !hormoneTreatmentCurrentContainer.classList.contains('hidden')) {
hormoneTreatmentCurrentContainer.classList.add('hidden');
}
});
document.getElementById('hormone-treatment-current-yes').addEventListener('change', (event) => {
if (event.target.checked) {
hormoneTreatmentTypeContainer.classList.remove('hidden');
}
});
document.getElementById('hormone-treatment-current-no').addEventListener('change', (event) => {
if (event.target.checked && !hormoneTreatmentTypeContainer.classList.contains('hidden')) {
hormoneTreatmentTypeContainer.classList.add('hidden');
}
});
document.getElementById('hormone-treatment-current-unknown').addEventListener('change', (event) => {
if (event.target.checked && !hormoneTreatmentTypeContainer.classList.contains('hidden')) {
hormoneTreatmentTypeContainer.classList.add('hidden');
}
});
document.getElementById('hormonal-contraceptive-yes').addEventListener('change', (event) => {
if (event.target.checked) {
hormonalContraceptiveContainer.classList.remove('hidden');
}
});
document.getElementById('hormonal-contraceptive-no').addEventListener('change', (event) => {
if (event.target.checked && !hormonalContraceptiveContainer.classList.contains('hidden')) {
hormonalContraceptiveContainer.classList.add('hidden');
}
});
document.getElementById('hormonal-contraceptive-unknown').addEventListener('change', (event) => {
if (event.target.checked && !hormonalContraceptiveContainer.classList.contains('hidden')) {
hormonalContraceptiveContainer.classList.add('hidden');
}
});
document.getElementById('alcohol-use-former').addEventListener('change', (event) => {
if (event.target.checked) {
alcoholContainer.classList.remove('hidden');
document.getElementById('alcohol-type-label').innerHTML = 'Please select any of the following alcoholic beverages that you had in the 12 months <em>before</em> you stopped drinking.';
document.getElementById('wine-freq-label').innerHTML = 'Over the 12 months <em>before</em> you stopped drinking, how often did you usually drink wine?'
document.getElementById('wine-serving-label').innerHTML = 'Over the 12 months <em>before</em> you stopped drinking, on the days that you drank wine, how many servings did you drink per day?';
document.getElementById('blc-freq-label').innerHTML = 'Over the 12 months <em>before</em> you stopped drinking, how often did you usually drink glasses of beer/lager/cider?';
document.getElementById('blc-serving-label').innerHTML = 'Over the 12 months <em>before</em> you stopped drinking, on the days that you drank beer/lager/cider, how many servings did you drink per day?';
document.getElementById('beer-freq-label').innerHTML = 'Over the 12 months <em>before</em> you stopped drinking, how often did you usually drink bottles of beer?';
document.getElementById('beer-serving-label').innerHTML = 'Over the 12 months <em>before</em> you stopped drinking, on the days that you drank beer, how many servings did you drink per day?';
document.getElementById('pop-freq-label').innerHTML = 'Over the 12 months <em>before</em> you stopped drinking, how often did you usually drink alcoholic pop beverages?';
document.getElementById('pop-serving-label').innerHTML = 'Over the 12 months <em>before</em> you stopped drinking, on the days that you drank alcoholic pop beverages, how many servings did you drink per day?';
document.getElementById('shots-freq-label').innerHTML = 'Over the 12 months <em>before</em> you stopped drinking, how often did you usually take shots of liquor?';
document.getElementById('shot-serving-label').innerHTML = 'Over the 12 months <em>before</em> you stopped drinking, on the days that you drank liquor, how many servings did you drink per day?';
}
});