Skip to content

Commit c65e2e1

Browse files
natalialuzuriaganatalialuzuriaga
committed
Added working USWDS CDNs and start styling update
Signed-off-by: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
1 parent 781dfa6 commit c65e2e1

1 file changed

Lines changed: 32 additions & 47 deletions

File tree

‎index.html‎

Lines changed: 32 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,17 @@
11
<html>
2+
<meta charset="UTF-8">
23

34
<head>
4-
<meta charset="utf-8">
5-
<!-- USWDS not working -->
6-
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
7-
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
8-
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.11.2/css/uswds.min.css"> -->
9-
<!-- <link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.form.min.css"> -->
10-
<!-- <link rel="stylesheet" href="https://cdn.form.io/uswds/uswds.min.css"> -->
11-
<!-- <link rel="stylesheet" href="https://unpkg.com/formiojs@3.0.0-alpha.13/dist/formio.full.min.css"> -->
12-
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.11.2/js/uswds.min.js"></script> -->
13-
<!-- <script src="https://cdn.form.io/formiojs/formio.form.min.js"></script> -->
14-
<!-- <script src="https://cdn.form.io/uswds/uswds.min.js"></script> -->
15-
<!-- <script src="https://cdn.form.io/formiojs/formio.full.js"></script> -->
16-
<!-- <script src="https://cdn.form.io/js/formio.embed.js"></script> -->
17-
185
<link rel="icon" type="image/x-icon" href="favicon.ico">
19-
20-
<!-- Uses bootstrap for now -->
21-
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
226
<link rel="stylesheet" href="css/styles.css">
237

24-
<!-- Working Form.io CDN -->
25-
<script src="https://unpkg.com/formiojs@4.21.6/dist/formio.full.min.js"></script>
26-
<link href="https://cdn.jsdelivr.net/npm/formiojs@4.21.6/dist/formio.full.min.css" rel="stylesheet">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.1.0/css/uswds.min.css">
10+
<link rel="stylesheet" href="https://cdn.form.io/js/formio.form.min.css">
11+
<link rel="stylesheet" href="https://cdn.form.io/uswds/uswds.min.css">
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.1.0/js/uswds.min.js"></script>
13+
<script src="https://cdn.form.io/js/formio.form.min.js"></script>
14+
<script src="https://cdn.form.io/uswds/uswds.min.js"></script>
2715

2816
<!-- Render the form -->
2917
<script src="js/generateFormComponents.js"></script>
@@ -33,20 +21,14 @@
3321
<script type="text/javascript">
3422
createFormComponents()
3523
.then((components) => {
24+
Formio.use(uswds);
3625
Formio.createForm(document.getElementById("formio"), {
3726
display: "form",
38-
theme: "primary",
39-
settings: {
40-
pdf: {
41-
id: "1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
42-
src: "https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
43-
},
44-
},
4527
components: components,
4628
}).then(function (form) {
4729
window.formIOInstance = form;
4830
form.on("submit", function (submission) {
49-
console.log("form submission here:", submission);
31+
console.log("Form Submission here:", submission);
5032
createCodeJson(submission.data);
5133
});
5234
});
@@ -64,7 +46,7 @@
6446
<div class="exemptions-header">
6547
<div class="step-header">
6648
<div class="step-number">1</div>
67-
<h3>Identify your project's classification</h3>
49+
<h2>Identify your project's classification</h2>
6850
</div>
6951
</div>
7052
<div id="exemptions-quiz-container" class="exemptions-quiz-container">
@@ -76,34 +58,35 @@ <h4 id="quiz-subheading">
7658
<div class="usa-radio">
7759
<input class="usa-radio__input usa-radio__input--tile" id="check-open-source" type="radio"
7860
name="exemption-condition" value="openSource" />
79-
<label class="usa-radio__label" for="check-open-source">Open Source</label>
80-
<span class="usa-checkbox__label-description">This project is publicly available
81-
and licensed under terms that allow others to use, modify, and distribute it (e.g.
82-
github.com)</span></label>
61+
<label class="usa-radio__label" for="check-open-source">Open Source
62+
<span class="usa-checkbox__label-description">This project is publicly available
63+
and licensed under terms that allow others to use, modify, and distribute it (e.g.
64+
github.com)</span></label>
8365
</div>
8466
<div class="usa-radio">
8567
<input class="usa-radio__input usa-radio__input--tile" id="check-govt-reuse" type="radio"
8668
name="exemption-condition" value="governmentWideReuse" />
87-
<label class="usa-radio__label" for="check-govt-reuse">Government Wide Reuse</label>
88-
<span class="usa-checkbox__label-description">The project is available internally for government
89-
wide use (e.g. github.cms.gov)</span></label>
69+
<label class="usa-radio__label" for="check-govt-reuse">Government Wide Reuse
70+
<span class="usa-checkbox__label-description">The project is available internally for
71+
government wide use (e.g. github.cms.gov)</span></label>
9072
</div>
9173
<div class="usa-radio">
9274
<input class="usa-radio__input usa-radio__input--tile" id="check-exempt" type="radio"
9375
name="exemption-condition" value="exempt" />
94-
<label class="usa-radio__label" for="check-exempt">None of the above</label>
95-
<span class="usa-checkbox__label-description">The project may be considered exempted from
96-
sharing and reuse as per the SHARE IT Act and M-16-21. </span></label>
76+
<label class="usa-radio__label" for="check-exempt">None of the above
77+
<span class="usa-checkbox__label-description">The project may be considered exempted from
78+
sharing and reuse as per the SHARE IT Act and M-16-21. </span></label>
9779
</div>
9880
</fieldset>
99-
<button type="button" id="start" onclick="determineExemptions(event)">Submit</button>
81+
82+
<button class="usa-button" type="button" id="start" onclick="determineExemptions(event)">Submit</button>
10083
</div>
10184
</div>
10285
<div class="results" style="display: none;">
10386
<div class="results-container">
104-
<p class="exemption-result">Your project </p>
87+
<div class="exemption-result"></div>
10588
</div>
106-
<button id="start" onclick="handleClick(event)">Try Again</button>
89+
<button class="usa-button usa-button--unstyled" id="start" onclick="handleClick(event)">Try Again</button>
10790
</div>
10891
</div>
10992

@@ -180,14 +163,15 @@ <h4 id="quiz-subheading">
180163
<label class="usa-checkbox__label" for="share-it-act-check-none">None of the above </label>
181164
</div>
182165
</fieldset>
183-
<button type="button" id="share-it-act" onclick="determineExemptions(event)">Submit</button>
166+
<button class="usa-button" type="button" id="share-it-act"
167+
onclick="determineExemptions(event)">Submit</button>
184168
</div>
185169
</div>
186170
<div class="results" style="display: none;">
187171
<div class="results-container">
188172
<p class="exemption-result">Your project </p>
189173
</div>
190-
<button id="share-it-act" onclick="handleClick(event)">Next</button>
174+
<button class="usa-button" id="share-it-act" onclick="handleClick(event)">Next</button>
191175
</div>
192176
</div>
193177

@@ -248,14 +232,15 @@ <h4 id="quiz-subheading">
248232
<label class="usa-checkbox__label" for="m-16-21-check-none">None of the above </label>
249233
</div>
250234
</fieldset>
251-
<button type="button" id="m-16-21" onclick="determineExemptions(event)">Submit</button>
235+
<button class="usa-button" type="button" id="m-16-21"
236+
onclick="determineExemptions(event)">Submit</button>
252237
</div>
253238
</div>
254239
<div class="results" style="display: none;">
255240
<div class="results-container">
256241
<p class="exemption-result">Your project </p>
257242
</div>
258-
<button id="m-16-21" onclick="handleClick(event)">Try Again</button>
243+
<button class="usa-button" id="m-16-21" onclick="handleClick(event)">Try Again</button>
259244
</div>
260245
</div>
261246

@@ -275,7 +260,7 @@ <h4 id="quiz-subheading">
275260
<div id="form-subheader">
276261
<div class="step-header">
277262
<div class="step-number">3</div>
278-
<h3>Complete the entire form to generate the code.json file</h3>
263+
<h2>Complete the entire form to generate the code.json file</h2>
279264
</div>
280265
</div>
281266
<br>

0 commit comments

Comments
 (0)