Skip to content

Commit 4c2f93e

Browse files
natalialuzuriaganatalialuzuriaga
committed
Added simple exemption quiz and combined all 3 quiz into 1 single flow
Signed-off-by: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
1 parent 4b31e6a commit 4c2f93e

File tree

5 files changed

+694
-530
lines changed

5 files changed

+694
-530
lines changed

‎index.html‎

Lines changed: 70 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,60 @@
6060
<body>
6161
<div id="form-header"></div>
6262

63-
<div class="exemptions" id="share-it-act">
64-
<div id="exemptions-header"></div>
63+
<div class="exemptions" id="start">
64+
<div class="exemptions-header">
65+
<div class="step-header">
66+
<div class="step-number">1</div>
67+
<h3>Identify your project's classification</h3>
68+
</div>
69+
</div>
70+
<div id="exemptions-quiz-container" class="exemptions-quiz-container">
71+
<h4 id="quiz-subheading">
72+
My project is considered:
73+
</h4>
74+
<div id="exemptions-quiz">
75+
<fieldset class="usa-fieldset">
76+
<div class="usa-radio">
77+
<input class="usa-radio__input usa-radio__input--tile" id="check-open-source" type="radio"
78+
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>
83+
</div>
84+
<div class="usa-radio">
85+
<input class="usa-radio__input usa-radio__input--tile" id="check-govt-reuse" type="radio"
86+
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>
90+
</div>
91+
<div class="usa-radio">
92+
<input class="usa-radio__input usa-radio__input--tile" id="check-exempt" type="radio"
93+
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>
97+
</div>
98+
</fieldset>
99+
<button type="button" id="start" onclick="determineExemptions(event)">Submit</button>
100+
</div>
101+
</div>
102+
<div class="results" style="display: none;">
103+
<div class="results-container">
104+
<p class="exemption-result">Your project </p>
105+
</div>
106+
<button id="start" onclick="handleClick(event)">Try Again</button>
107+
</div>
108+
</div>
109+
110+
<div class="exemptions" id="share-it-act" style="display: none;">
111+
<div class="exemptions-header">
112+
<div class="step-header">
113+
<div class="step-number">1b</div>
114+
<h3>Is my project exempted from the SHARE IT Act?</h3>
115+
</div>
116+
</div>
65117
<div id="exemptions-quiz-container" class="exemptions-quiz-container">
66118
<h4 id="quiz-subheading">
67119
Answer the series of questions below to determine if your project falls under the exemption categories
@@ -135,19 +187,31 @@ <h4 id="quiz-subheading">
135187
<div class="results-container">
136188
<p class="exemption-result">Your project </p>
137189
</div>
138-
<button id="share-it-act" onclick="handleClick(event)">Try Again</button>
190+
<button id="share-it-act" onclick="handleClick(event)">Next</button>
139191
</div>
140192
</div>
141193

142-
<div class="exemptions" id="m-16-21">
143-
<div id="exemptions2-header"></div>
194+
<div class="exemptions" id="m-16-21" style="display: none;">
195+
<div class="exemptions-header">
196+
<div class="step-header">
197+
<div class="step-number">1c</div>
198+
<h3>Is my project exempted from M-16-21?</h3>
199+
</div>
200+
</div>
144201
<div class="exemptions-quiz-container">
145202
<h4 id="quiz-subheading">
146203
Answer the series of questions below to determine if your project falls under the exemption categories
147204
according to M-16-21 Act.
148205
</h4>
149206
<div id="exemptions-quiz">
150207
<fieldset class="usa-fieldset">
208+
<div class="usa-checkbox">
209+
<input class="usa-checkbox__input" id="check-patent-and-ip" type="checkbox"
210+
name="exemption-condition" value="exemptByIPRestriction">
211+
<label class="usa-checkbox__label" for="check-patnet-and-ip">
212+
Is sharing of the source code limited by patent or intellectual property restrictions?
213+
</label>
214+
</div>
151215
<div class="usa-checkbox">
152216
<input class="usa-checkbox__input" id="check-agency-systems" type="checkbox"
153217
name="exemption-condition" value="exemptByAgencySystem">
@@ -210,7 +274,7 @@ <h4 id="quiz-subheading">
210274

211275
<div id="form-subheader">
212276
<div class="step-header">
213-
<div class="step-number">4</div>
277+
<div class="step-number">3</div>
214278
<h3>Complete the entire form to generate the code.json file</h3>
215279
</div>
216280
</div>

‎js/exemptionQuizHandler.js‎

Lines changed: 77 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@ function determineExemptions(event) {
88
var values = Array.from(document.querySelectorAll(`#${legislationName} input[name='exemption-condition']:checked`)).map((input) => input.value);
99
var checkedValues = [...new Set(values)];
1010

11+
// If simple quiz and exempt, go directly to SHARE IT Act Quiz
12+
if (legislationName === "start" && (checkedValues.length === 0 || checkedValues[0] === "exempt")) {
13+
handleClick(event, true);
14+
return;
15+
}
16+
1117
const results = determineResults(checkedValues, legislationName);
1218

1319
// Display results
@@ -19,12 +25,20 @@ function determineExemptions(event) {
1925
function determineResults(checkedValues, legislationName) {
2026
var text = "";
2127

22-
// Project is not exempted
23-
if (checkedValues.length === 1 && checkedValues[0].includes("none")) {
28+
// Project is not exempt - simple quiz
29+
if (legislationName == "start") {
30+
if (checkedValues[0] !== "exempt") {
31+
text = `<h4>Your project is qualified for sharing and reuse according to the SHARE IT Act and M-16-21.</h4>
32+
<p>We've marked this in the form below for you as: <strong>${checkedValues[0]}</strong></p>`
33+
}
34+
}
35+
36+
// Project is not exempt
37+
else if ((checkedValues.length === 1 && checkedValues[0].includes("none")) || checkedValues.length === 0) {
2438

2539
if (legislationName === "share-it-act") {
2640
text = `<h4>Your project is: <div class="not-exempt"><strong>NOT EXEMPTED</strong></div></h4>
27-
<p>Please complete <strong>Part 2</strong> to determine additional project exemptions.</p>`;
41+
<p>Please complete <strong>Part 1c</strong> to determine additional project exemptions.</p>`;
2842
}
2943
else {
3044
text = `<h4>Your project is: <div class="not-exempt"><strong>NOT EXEMPTED</strong></div></h4>
@@ -39,43 +53,80 @@ function determineResults(checkedValues, legislationName) {
3953
text = `<h4>Your project is: <strong>EXEMPTED</strong></h4>
4054
<p>We've marked this in the form below for you as: <strong>${selections}</strong></p>
4155
<p>Be sure to include a 1–2 sentence justification in the <code>exemptionText</code> field to support the exemption determination.</p>`;
56+
}
4257

43-
// Applies value to usageType on form
44-
try {
45-
const form = window.formIOInstance
46-
47-
const component = form.getComponent('usageType');
48-
var currentSelection = component.getValue() || [];
58+
setValue(checkedValues);
4959

50-
checkedValues.forEach(selected => {
51-
currentSelection[selected] = true;
52-
});
60+
return text;
61+
}
5362

54-
form.getComponent('usageType').setValue(currentSelection);
63+
function handleClick(event, exempt = false) {
64+
const legislationName = event.target.id;
65+
const quizContainer = document.querySelector(`#${legislationName}.exemptions`);
66+
var resultsContainer = document.querySelector(`#${legislationName} .results`);
67+
68+
// Determine next quiz
69+
var nextQuiz = "";
70+
if (legislationName === "start") {
71+
if (exempt) {
72+
nextQuiz = "share-it-act";
5573
}
56-
catch (error) {
57-
console.error("Form fill error:", error);
74+
else {
75+
nextQuiz = "start";
5876
}
5977
}
78+
else if (legislationName === "share-it-act") {
79+
nextQuiz = "m-16-21";
80+
}
81+
else {
82+
nextQuiz = "start";
83+
}
6084

61-
return text;
85+
event.preventDefault();
86+
resetQuiz(legislationName);
87+
88+
// Display
89+
resultsContainer.style.display = "none";
90+
quizContainer.style.display = "none";
91+
92+
const nextQuizDiv = document.querySelector(`#${nextQuiz}.exemptions`);
93+
const nextQuizContainer = document.querySelector(`#${nextQuiz} .exemptions-quiz-container`);
94+
nextQuizDiv.style.display = "block";
95+
nextQuizContainer.style.display = "block";
6296
}
6397

64-
function handleClick(event) {
65-
const legislationName = event.target.id;
98+
function setValue(checkedValues) {
99+
// Applies value to usageType on form
100+
try {
101+
const form = window.formIOInstance
66102

67-
const quizContainer = document.querySelector(`#${legislationName} .exemptions-quiz-container`);
68-
const resultsContainer = document.querySelector(`#${legislationName} .results`);
103+
const component = form.getComponent('usageType');
104+
var currentSelection = component.getValue() || [];
105+
106+
checkedValues.forEach(selected => {
107+
currentSelection[selected] = true;
108+
});
109+
110+
form.getComponent('usageType').setValue(currentSelection);
111+
}
112+
catch (error) {
113+
console.error("Form fill error:", error);
114+
}
115+
}
116+
117+
function resetQuiz(legislationName) {
118+
var checkboxes = {};
119+
120+
if (legislationName === "start") {
121+
checkboxes = document.querySelectorAll(`#${legislationName} .usa-radio__input`);
122+
}
123+
else {
124+
checkboxes = document.querySelectorAll(`#${legislationName} .usa-checkbox__input`);
125+
}
69126

70-
event.preventDefault();
71-
//Uncheck checkboxes
72-
const checkboxes = document.querySelectorAll(`#${legislationName} .usa-checkbox__input`);
73127
checkboxes.forEach((checkbox) => {
74128
checkbox.checked = false;
75129
});
76-
77-
resultsContainer.style.display = "none";
78-
quizContainer.style.display = "block";
79130
}
80131

81132
window.determineExemptions = determineExemptions;

‎js/generateFormComponents.js‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -254,16 +254,9 @@ function createFormHeading(title, description) {
254254
`;
255255
}
256256

257-
function createExemptionsBox() {
258-
const container = document.getElementById("exemptions-header")
259-
container.innerHTML = `<div class="step-header"><div class="step-number">1</div><h3>Is my project exempted from the SHARE IT Act?</h3></div>`
260-
const secondContainer = document.getElementById("exemptions2-header")
261-
secondContainer.innerHTML = `<div class="step-header"><div class="step-number">2</div><h3>Is my project exempted from M-16-21?</h3></div>`
262-
}
263-
264257
function createAutoGenerationBox() {
265258
const container = document.getElementById("auto-generation-header")
266-
container.innerHTML = `<div class="step-header"><div class="step-number">3</div><h3>Auto Generate Fields</h3></div> \n <h4> Please enter your repositories GitHub URL in order to automatically pre-fill some of the fields in this form! </h4> \n <h6> <i>This currently only works on <b>public</b> repositories</i> </h6>`
259+
container.innerHTML = `<div class="step-header"><div class="step-number">2</div><h3>Auto Generate Fields</h3></div> \n <h4> Please enter your repositories GitHub URL in order to automatically pre-fill some of the fields in this form! </h4> \n <h6> <i>This currently only works on <b>public</b> repositories</i> </h6>`
267260
}
268261

269262
// Iterates through each json field and creates component array for Form.io
@@ -312,7 +305,6 @@ async function createFormComponents() {
312305
console.log("JSON Data:", jsonData);
313306

314307
createFormHeading(jsonData["title"], jsonData["description"]);
315-
createExemptionsBox()
316308
createAutoGenerationBox()
317309

318310
components = createAllComponents(jsonData);

0 commit comments

Comments
 (0)