Changed styling for exemptions quiz

Signed-off-by: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>

Author: natalialuzuriaga

index.html

@@ -79,7 +79,8 @@ <h4 id="quiz-subheading">
 					</div>
 				</fieldset>
 
-				<button class="usa-button" type="button" id="start" onclick="determineExemptions(event)">Submit</button>
+				<button class="usa-button margin-top-2" type="button" id="start"
+					onclick="determineExemptions(event)">Submit</button>
 			</div>
 		</div>
 		<div class="results" style="display: none;">
@@ -94,7 +95,7 @@ <h4 id="quiz-subheading">
 		<div class="exemptions-header">
 			<div class="step-header">
 				<div class="step-number">1b</div>
-				<h3>Is my project exempted from the SHARE IT Act?</h3>
+				<h2>Is my project exempted from the SHARE IT Act?</h2>
 			</div>
 		</div>
 		<div id="exemptions-quiz-container" class="exemptions-quiz-container">
@@ -163,13 +164,13 @@ <h4 id="quiz-subheading">
 						<label class="usa-checkbox__label" for="share-it-act-check-none">None of the above </label>
 					</div>
 				</fieldset>
-				<button class="usa-button" type="button" id="share-it-act"
+				<button class="usa-button margin-top-2" type="button" id="share-it-act"
 					onclick="determineExemptions(event)">Submit</button>
 			</div>
 		</div>
 		<div class="results" style="display: none;">
 			<div class="results-container">
-				<p class="exemption-result">Your project </p>
+				<div class="exemption-result"></div>
 			</div>
 			<button class="usa-button" id="share-it-act" onclick="handleClick(event)">Next</button>
 		</div>
@@ -179,7 +180,7 @@ <h4 id="quiz-subheading">
 		<div class="exemptions-header">
 			<div class="step-header">
 				<div class="step-number">1c</div>
-				<h3>Is my project exempted from M-16-21?</h3>
+				<h2>Is my project exempted from M-16-21?</h2>
 			</div>
 		</div>
 		<div class="exemptions-quiz-container">
@@ -232,15 +233,16 @@ <h4 id="quiz-subheading">
 						<label class="usa-checkbox__label" for="m-16-21-check-none">None of the above </label>
 					</div>
 				</fieldset>
-				<button class="usa-button" type="button" id="m-16-21"
+				<button class="usa-button margin-top-2" type="button" id="m-16-21"
 					onclick="determineExemptions(event)">Submit</button>
 			</div>
 		</div>
 		<div class="results" style="display: none;">
 			<div class="results-container">
-				<p class="exemption-result">Your project </p>
+				<div class="exemption-result"></div>
 			</div>
-			<button class="usa-button" id="m-16-21" onclick="handleClick(event)">Try Again</button>
+			<button class="usa-button usa-button--unstyled" id="m-16-21" onclick="handleClick(event)">Try
+				Again</button>
 		</div>
 	</div>
 

js/exemptionQuizHandler.js

@@ -28,7 +28,7 @@ function determineResults(checkedValues, legislationName) {
     // Project is not exempt - simple quiz
     if (legislationName == "start") {
         if (checkedValues[0] !== "exempt") {
-            text = `<h4>Your project is qualified for sharing and reuse according to the SHARE IT Act and M-16-21.</h4>
+            text = `<h4 class="usa-heading margin-top-neg-05">Your project is qualified for sharing and reuse according to the SHARE IT Act and M-16-21.</h4>
                 <p>We've marked this in the form below for you as: <strong>${checkedValues[0]}</strong></p>`
         }
     }
@@ -37,20 +37,20 @@ function determineResults(checkedValues, legislationName) {
     else if ((checkedValues.length === 1 && checkedValues[0].includes("none")) || checkedValues.length === 0) {
 
         if (legislationName === "share-it-act") {
-            text = `<h4>Your project is: <div class="not-exempt"><strong>NOT EXEMPTED</strong></div></h4>
+            text = `<h4 class="usa-heading margin-top-neg-05">Your project is: <div class="not-exempt"><strong>NOT EXEMPTED</strong></div></h4>
                 <p>Please complete <strong>Part 1c</strong> to determine additional project exemptions.</p>`;
         }
         else {
-            text = `<h4>Your project is: <div class="not-exempt"><strong>NOT EXEMPTED</strong></div></h4>
-                <h5>If your project is NOT exempted from both M-16-21 AND the SHARE IT Act, please mark the following on the form: </h5>
+            text = `<h4 class="usa-heading margin-top-neg-05">Your project is: <div class="not-exempt"><strong>NOT EXEMPTED</strong></div></h4>
+                <p>If your project is NOT exempted from both M-16-21 AND the SHARE IT Act, please mark the following on the form: </p>
                 <p>If your repository is public, mark <code>usageType</code> as <strong>openSource</strong>.</p>
                 <p>If your repository is private, mark <code>usageType</code> as <strong>governmentWideReuse</strong>.</p>`;
         }
     }
     // Project is exempted
     else {
         const selections = checkedValues.join(", ");
-        text = `<h4>Your project is: <strong>EXEMPTED</strong></h4>
+        text = `<h4 class="usa-heading margin-top-neg-05">Your project is: <strong>EXEMPTED</strong></h4>
                 <p>We've marked this in the form below for you as: <strong>${selections}</strong></p>
                 <p>Be sure to include a 1–2 sentence justification in the <code>exemptionText</code> field to support the exemption determination.</p>`;
     }