Merge pull request #168 from openstax/K12-90/Update-PSET-interactives

Update pset interactives
openstax · Jul 24, 2024 · 33f4a73 · 33f4a73
2 parents 50dedcf + 7ee7947
commit 33f4a73
Show file tree

Hide file tree

Showing 13 changed files with 62 additions and 52 deletions.
diff --git a/docs/schemas.md b/docs/schemas.md
@@ -226,16 +226,7 @@ Users can attempt to answer questions and check their solution. Retries are allo
 The output if the `data-wait-for-event="eventnameZ"` attribute is removed.
 
 <div style="text-align: center;">
-    <img src="./static/input_problem.png" width="450">
-</div>
-<div style="text-align: center;">
-    <img src="./static/dropdown_problem.png" width="450">
-</div>
-<div style="text-align: center;">
-    <img src="./static/multichoice_problem.png" width="450">
-</div>
-<div style="text-align: center;">
-    <img src="./static/multiselect_problem.png" width="450">
+    <img src="./static/problem_set_blocks.png" width="450">
 </div>
 
 

diff --git a/docs/static/dropdown_problem.png b/docs/static/dropdown_problem.png
diff --git a/docs/static/input_problem.png b/docs/static/input_problem.png
diff --git a/docs/static/multichoice_problem.png b/docs/static/multichoice_problem.png
diff --git a/docs/static/multiselect_problem.png b/docs/static/multiselect_problem.png
diff --git a/docs/static/problem_set_blocks.png b/docs/static/problem_set_blocks.png
diff --git a/src/components/AttemptsCounter.tsx b/src/components/AttemptsCounter.tsx
@@ -5,7 +5,7 @@ interface Props {
 
 export const AttemptsCounter = ({ retryLimit, retriesAllowed }: Props): JSX.Element => {
   return (
-    <div className="os-flex os-justify-content-end">
+    <div className="os-ml-auto">
       <p className="os-attempts-text">
         Attempts left: {retryLimit - retriesAllowed + 1}/
         {retryLimit + 1}

diff --git a/src/components/DropdownProblem.tsx b/src/components/DropdownProblem.tsx
@@ -111,7 +111,7 @@ export const DropdownProblem = ({
   }
 
   return (
-    <div className="os-raise-bootstrap">
+    <div className="os-raise-bootstrap mb-4">
       <div className="my-3" ref={contentRefCallback} dangerouslySetInnerHTML={{ __html: content }} />
       <Formik
         initialValues={{ response: '' }}
@@ -142,18 +142,20 @@ export const DropdownProblem = ({
               {generateOptions()}
               </Field>
             </div>
-            <ErrorMessage className="text-danger my-3" component="div" name="response" />
-            <div className="os-text-center mt-4">
+            <div className="os-error-attempts-container">
+                <ErrorMessage className="os-error-message" component="div" name="response" />
+                <AttemptsCounter retryLimit={retryLimit} retriesAllowed={retriesAllowed}/>
+            </div>
+            <div className="os-text-center mt-1">
               <button
-                className="os-btn btn-outline-primary"
+                className="os-submit-button-default-theme"
                 type="submit"
                 disabled={isSubmitting || formDisabled}
               >
                 {buttonText}
               </button>
             </div>
             {feedback !== '' ? <div ref={contentRefCallback} dangerouslySetInnerHTML={{ __html: feedback }} className="my-3 os-feedback-message" /> : null }
-            <AttemptsCounter retryLimit={retryLimit} retriesAllowed={retriesAllowed} />
           </Form>
         )}
       </Formik>

diff --git a/src/components/InputProblem.tsx b/src/components/InputProblem.tsx
@@ -165,7 +165,7 @@ export const InputProblem = ({
     setFeedback('')
   }
   return (
-  <div className="os-raise-bootstrap">
+  <div className="os-raise-bootstrap mb-4">
 
     <div className="my-3" ref={contentRefCallback} dangerouslySetInnerHTML={{ __html: content }} />
     <Formik
@@ -208,11 +208,13 @@ export const InputProblem = ({
                     )
               }
               </div>
-              <ErrorMessage className="text-danger my-3" component="div" name="response" />
-              <div className="os-text-center mt-4">
-              <button type="submit" disabled={inputDisabled || isSubmitting} className="os-btn btn-outline-primary">{buttonText}</button></div>
+              <div className="os-error-attempts-container">
+                <ErrorMessage className="os-error-message" component="div" name="response" />
+                <AttemptsCounter retryLimit={retryLimit} retriesAllowed={retriesAllowed}/>
+              </div>
+              <div className="os-text-center mt-1">
+              <button type="submit" disabled={inputDisabled || isSubmitting} className="os-submit-button-default-theme">{buttonText}</button></div>
               {feedback !== '' ? <div ref={contentRefCallback} dangerouslySetInnerHTML={{ __html: feedback }} className="my-3 os-feedback-message" /> : null}
-              <AttemptsCounter retryLimit={retryLimit} retriesAllowed={retriesAllowed}/>
             </Form>
           )}
         </Formik>

diff --git a/src/components/MultipleChoiceProblem.tsx b/src/components/MultipleChoiceProblem.tsx
@@ -161,7 +161,7 @@ export const MultipleChoiceProblem = ({
     }
   }
   return (
-    <div className="os-raise-bootstrap" ref={contentRefCallback}>
+    <div className="os-raise-bootstrap mb-4" ref={contentRefCallback}>
       <div className="my-3" dangerouslySetInnerHTML={{ __html: content }} />
       <Formik
         initialValues={{ response: '' }}
@@ -173,14 +173,13 @@ export const MultipleChoiceProblem = ({
             <div className="os-grid">
               {generateOptions(values, isSubmitting, setFieldValue)}
             </div>
-            <ErrorMessage
-              className="text-danger my-3"
-              component="div"
-              name="response"
-            />
-            <div className="os-text-center mt-4">
+            <div className="os-error-attempts-container">
+                <ErrorMessage className="os-error-message" component="div" name="response" />
+                <AttemptsCounter retryLimit={retryLimit} retriesAllowed={retriesAllowed}/>
+            </div>
+            <div className="os-text-center mt-1">
               <button
-                className="os-btn btn-outline-primary"
+                className="os-submit-button-default-theme"
                 type="submit"
                 disabled={isSubmitting || formDisabled}
               >
@@ -196,7 +195,6 @@ export const MultipleChoiceProblem = ({
               />
                 )
               : null}
-              <AttemptsCounter retryLimit={retryLimit} retriesAllowed={retriesAllowed}/>
           </Form>
         )}
       </Formik>

diff --git a/src/components/MultiselectProblem.tsx b/src/components/MultiselectProblem.tsx
@@ -177,7 +177,7 @@ export const MultiselectProblem = ({
   }
 
   return (
-    <div className="os-raise-bootstrap" ref={contentRefCallback}>
+    <div className="os-raise-bootstrap mb-4" ref={contentRefCallback}>
       <div className="my-3" dangerouslySetInnerHTML={{ __html: content }} />
       <Formik
         initialValues={{ response: [] }}
@@ -187,10 +187,13 @@ export const MultiselectProblem = ({
         {({ isSubmitting, setFieldValue, values }) => (
           <Form>
             <div className='os-grid'>{generateOptions(values, isSubmitting, setFieldValue)}</div>
-            <ErrorMessage className="text-danger my-3" component="div" name="response" />
-            <div className='os-text-center mt-4'>
+            <div className="os-error-attempts-container">
+                <ErrorMessage className="os-error-message" component="div" name="response" />
+                <AttemptsCounter retryLimit={retryLimit} retriesAllowed={retriesAllowed}/>
+            </div>
+            <div className='os-text-center mt-1'>
               <button
-                className="os-btn btn-outline-primary"
+                className="os-submit-button-default-theme"
                 type="submit"
                 disabled={isSubmitting || formDisabled}
               >
@@ -199,7 +202,6 @@ export const MultiselectProblem = ({
             </div>
 
             {feedback !== '' ? <div ref={contentRefCallback} dangerouslySetInnerHTML={{ __html: feedback }} className="my-3 os-feedback-message" /> : null}
-            <AttemptsCounter retryLimit={retryLimit} retriesAllowed={retriesAllowed} />
           </Form>
         )}
       </Formik>

diff --git a/src/styles/bootstrap.scss b/src/styles/bootstrap.scss
@@ -156,13 +156,13 @@
     /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
     @extend .form-select;
 
-    border: .125rem solid $os-default-answer-border-color;
+    border: .063rem solid $os-default-gray;
     border-radius: .3125rem;
-    box-shadow: 0 .125rem .125rem $os-default-box-shadow;
-    padding: .75rem 2.25rem .75rem .75rem;
+    box-shadow: 0 .125rem .25rem 0 hsla(0deg 0% 46% / 25%);
+    padding: 1rem 1.5rem;
     cursor: pointer;
     background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" viewBox="0 0 22 22"%3E%3Cpath fill="currentColor" d="m7 10l5 5l5-5z"%2F%3E%3C%2Fsvg%3E'), linear-gradient(#f5f5f5, #f5f5f5),;
-    background-size: 2.5rem 3.125rem;
+    background-size: 3rem 4.125rem;
     background-position: right 0 center;
     color: $os-medium-gray;
   }
@@ -172,12 +172,13 @@
     /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
     @extend .form-control;
 
-    border: .063rem solid #757575; border-radius: .3125rem; 
+    border: .063rem solid $os-default-gray;
+    border-radius: .3125rem;
     box-shadow: 0 .125rem .25rem 0 hsla(0deg 0% 46% / 25%);
   }
 
   input.os-form-control {
-    padding: .75rem;
+    padding: 1rem 1.5rem;
   }
 
   textarea.os-form-control {
@@ -201,6 +202,7 @@
     @extend .form-check;
 
     padding-left: 0;
+    margin-bottom: 0;
   }
 
   // Extends Checkbox for Multi Select Styles

diff --git a/src/styles/interactives.scss b/src/styles/interactives.scss
@@ -1,7 +1,8 @@
 $os-correct-answer-border-color: #019920;
 $os-selected-focus-border-color: #159eb2;
 $os-wrong-answer-border-color: #fc0516;
-$os-default-answer-border-color: #424242;
+$os-default-gray: #757575;
+$os-dark-gray: #424242;
 $os-medium-gray: #626262;
 $os-light-gray: #d9d9d9;
 $os-answer-background: #f5f5f5;
@@ -12,13 +13,13 @@ $os-dark-green: #0A5B50;
 div.os-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-gap: 2rem;
+  grid-gap: 1rem;
 }
 
 .os-default-answer-choice {
-  border: .125rem solid $os-default-answer-border-color;
+  border: .063rem solid $os-default-gray;
   border-radius: .3125rem;
-  box-shadow: 0 .125rem .125rem $os-default-box-shadow;
+  box-shadow: 0 .125rem .25rem 0 hsla(0deg 0% 46% / 25%);
 }
 
 div.os-default-answer-choice:focus-within {
@@ -27,14 +28,15 @@ div.os-default-answer-choice:focus-within {
 
 div.os-default-answer-choice > div:hover {
   background-color: $os-answer-background;
+  border-radius: .3125rem;
 }
 
 label.os-label-container {
   display: flex;
   align-items: center;
   width: 100%;
   height: 100%;
-  padding: .75rem .5rem .75rem .8rem;
+  padding: 1rem 1.5rem;
   cursor: pointer;
 }
 
@@ -86,7 +88,7 @@ select.os-form-select:hover {
 // Input Styles
 .os-form-control.os-form-control:focus {
   border-color: $os-selected-focus-border-color;
-  box-shadow: 0 .125rem .125rem $os-default-box-shadow;
+  box-shadow: 0 .125rem .25rem 0 hsla(0deg 0% 46% / 25%);
 }
 
 .os-form-control.os-form-control:disabled {
@@ -119,14 +121,15 @@ div.os-feedback-message {
 
 div.os-feedback-message p {
   color: #000;
+  margin-bottom: 0;
 }
 
 p.os-attempts-text {
-  color: $os-medium-gray;
+  color: $os-dark-gray;
 }
 
-div.os-justify-content-end {
-  justify-content: end;
+div.os-error-message {
+  color: #C22032;
 }
 
 .os-disabled.os-disabled {
@@ -138,6 +141,16 @@ div.os-justify-content-end {
   text-align: center;
 }
 
+div.os-error-attempts-container {
+  display: flex;
+  justify-content: space-between;
+  margin-top: .5rem;
+}
+
+.os-ml-auto {
+  margin-left: auto;
+}
+
 // All Interactives + CTA Styles
 %os-submit-button-base {
   border-radius: .5rem;
@@ -164,8 +177,8 @@ div.os-justify-content-end {
 button.os-submit-button-default-theme {
   @extend %os-submit-button-base;
 
-  background-color: #757575;
-  border: 1px solid #757575;
+  background-color: $os-default-gray;
+  border: 1px solid $os-default-gray;
   box-shadow: 0 .125rem .25rem 0 hsla(0deg 0% 46% / 25%);
 }