resize content text inside exercise and completion status

Author: jivey

src/components/Answer.tsx

@@ -10,7 +10,7 @@ import { colors } from '../theme';
 const StyledAnswerIndicator = styled.div<{ state: boolean }>`
   color: ${props => props.state ? colors.answer.correct : colors.answer.incorrect};
   text-transform: uppercase;
-  font-size: 1.1rem;
+  font-size: calc(1.1rem * var(--content-text-scale));
   font-weight: bold;
 `;
 

src/components/Card.tsx

@@ -145,7 +145,7 @@ StepCardHeader.displayName = 'StepCardHeader';
 const StepCardQuestion = styled.div<{ unpadded?: boolean }>`
   .step-card-body {
     ${mixins.stepCardPadding()}
-
+    overflow: auto;
     background: ${colors.card.body.background};
 
     &.exercise-stimulus {

src/components/CompletionStatus.tsx

@@ -1,7 +1,13 @@
-import styled from "styled-components";
+import styled, { createGlobalStyle } from "styled-components";
 import { InnerStepCard } from "./Card";
 import Button from "./Button";
 
+const GlobalStyle = createGlobalStyle`
+  :root {
+    --content-text-scale: 1;
+  }
+`;
+
 export interface CompletionStatusProps {
   numberOfQuestions: number;
   numberCompleted: number;
@@ -10,8 +16,8 @@ export interface CompletionStatusProps {
 
 const CompletionStatusCard = styled(InnerStepCard)`
   padding: 88px 72px;
-  font-size: 1.8rem;
-  line-height: 3rem;
+  font-size: calc(1.8rem * var(--content-text-scale));
+  line-height: calc(3rem * var(--content-text-scale));
   display: block;
 
   button {
@@ -25,27 +31,28 @@ const CompletionStatusCard = styled(InnerStepCard)`
 `;
 
 const CompletionHeader = styled.h2`
-  font-size: 2.4rem;
+  font-size: calc(2.4rem * var(--content-text-scale));
   margin: 0;
 `;
 
-export const CompletionStatus = ({
+export const CompletionStatus = styled(({
   numberOfQuestions, numberCompleted, handleClick
 }: CompletionStatusProps) => {
-  
+
   const allCompleted = numberOfQuestions === numberCompleted;
   const someCompleted = numberCompleted > 0;
   const buttonText = allCompleted ? 'Next' : (
       someCompleted ? 'Continue' : 'Start'
   );
 
-  return (
+  return <>
+    <GlobalStyle />
     <CompletionStatusCard>
       <CompletionHeader>{allCompleted ? 'You are done.' : (someCompleted ? 'Quiz is partially complete.' : 'No questions have been answered.')}</CompletionHeader>
       <p>{allCompleted ? 'Great job answering all the questions.' : (someCompleted ? `You've completed ${numberCompleted} of ${numberOfQuestions} questions.` : 'Begin working on the quiz.')}</p>
-      <Button data-test-id={`${buttonText.split(' ')[0].toLowerCase()}-btn`} onClick={()=> handleClick()}>
+      <Button data-test-id={`${buttonText.split(' ')[0].toLowerCase()}-btn`} onClick={() => handleClick()}>
         {buttonText}
       </Button>
     </CompletionStatusCard>
-  )
-};
+  </>
+})``;

src/components/Exercise.stories.tsx

@@ -1,6 +1,7 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Exercise, ExerciseWithStepDataProps, ExerciseWithQuestionStatesProps } from './Exercise';
 import { Answer } from '../types';
+import styled from 'styled-components';
 
 const exerciseWithStepDataProps: ExerciseWithStepDataProps = {
   exercise: {
@@ -131,6 +132,38 @@ const exerciseWithQuestionStatesProps = (): ExerciseWithQuestionStatesProps => {
   },
 }};
 
+type TextResizerValue = -2 | -1 | 0 | 1 | 2 | 3;
+const textResizerScales = [0.75, 0.9, 1, 1.25, 1.5, 2];
+const textResizerValues: TextResizerValue[] = [-2, -1, 0, 1, 2, 3];
+const textResizerValueMap = new Map(textResizerValues.map((v, i) => [v, textResizerScales[i]]));
+
+const ExerciseWrapper = styled.div<{ textSize: TextResizerValue }>`
+   ${(props: { textSize: TextResizerValue }) => `
+    --content-text-scale: ${textResizerValueMap.get(props.textSize)};
+  `}
+`;
+
+const TextResizerProvider = ({ children }: { children: React.ReactNode }) => {
+  const [index, setIndex] = useState(2);
+
+  const increase = () => setIndex(Math.min(index + 1, textResizerValues.length - 1));
+  const decrease = () => setIndex(Math.max(index - 1, 0));
+
+  return (
+    <ExerciseWrapper textSize={textResizerValues[index]}>
+      <div style={{ marginBottom: '2rem', alignItems: 'center', placeContent: 'center', display: 'flex', gap: '1rem' }}>
+        <h3>Text Size</h3>
+        <button onClick={decrease}>- Decrease</button>
+        <span style={{ display: 'inline-block', width: '3rem', textAlign: 'center' }}>
+          <b>{textResizerScales[index]}</b>
+        </span>
+        <button onClick={increase}>+ Increase</button>
+      </div>
+      {children}
+    </ExerciseWrapper>
+  );
+};
+
 export const Default = () => {
   const [selectedAnswerId, setSelectedAnswerId] = useState<number>(0);
   const [apiIsPending, setApiIsPending] = useState(false)
@@ -144,7 +177,8 @@ export const Default = () => {
         setSelectedAnswerId(a.id)
       }}
       onAnswerSave={() => setApiIsPending(true)}
-    />)
+    />
+  )
 };
 
 export const DeprecatedStepData = () => <Exercise {...exerciseWithStepDataProps} />;
@@ -173,7 +207,7 @@ export const CompleteWithFeedback = () => {
     }
   };
 
-  return <Exercise {...props} />;
+  return <TextResizerProvider><Exercise {...props} /></TextResizerProvider>;
 };
 
 export const IncorrectWithFeedbackAndSolution = () => {
@@ -197,7 +231,7 @@ export const IncorrectWithFeedbackAndSolution = () => {
       apiIsPending: false
     }
   };
-  return <Exercise {...props} />;
+  return <TextResizerProvider><Exercise {...props} /></TextResizerProvider>;
 };
 
 export const IncorrectWithFeedbackAndSolutionWrappingText = () => {
@@ -223,7 +257,7 @@ export const IncorrectWithFeedbackAndSolutionWrappingText = () => {
   };
   props.exercise.questions[0].answers[0].content_html = 'A very long correct answer to observe line wrapping at mobile sizes';
   props.exercise.questions[0].answers[1].content_html = 'A very long incorrect answer to observe line wrapping at mobile sizes';
-  return <Exercise {...props} />;
+  return <TextResizerProvider><Exercise {...props} /></TextResizerProvider>;
 };
 
 export const MultiPartHalfComplete = () => {
@@ -325,7 +359,7 @@ export const MultiPartHalfComplete = () => {
     }
   };
 
-  return <Exercise {...props} />;
+  return <TextResizerProvider><Exercise {...props} /></TextResizerProvider>;
 };
 
 export const Icons = () => {
@@ -340,22 +374,24 @@ export const Icons = () => {
     }
   };
 
-  return <Exercise
-    {...exerciseWithQuestionStatesProps()}
-    exerciseIcons={{
-      topic: {
-        url: 'https://openstax.org',
-        location
-      },
-      errata: {
-        url: 'https://openstax.org',
-        location
-      },
-      info: {
-        location
-      },
-    }}
-  />;
+  return <TextResizerProvider>
+    <Exercise
+      {...exerciseWithQuestionStatesProps()}
+      exerciseIcons={{
+        topic: {
+          url: 'https://openstax.org',
+          location
+        },
+        errata: {
+          url: 'https://openstax.org',
+          location
+        },
+        info: {
+          location
+        },
+      }}
+    />
+  </TextResizerProvider>;
 };
 
 export const MathJax = () => {
@@ -506,7 +542,7 @@ bitterness. The discriminant <span data-math="b^2 - 4ac"></span> could perhaps a
   };
 
   return (
-    <>
+    <TextResizerProvider>
       <Exercise {...props1}
         onAnswerChange={(a: Omit<Answer, 'id'> & { id: number, question_id: number }) => {
           setSelectedAnswerId(a.id)
@@ -516,6 +552,6 @@ bitterness. The discriminant <span data-math="b^2 - 4ac"></span> could perhaps a
         }}
       />
       <Exercise {...props2} />
-    </>
+    </TextResizerProvider>
   );
 };

src/components/Exercise.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import scrollToElement from 'scroll-to-element';
-import styled, { css } from 'styled-components';
+import styled, { createGlobalStyle, css } from 'styled-components';
 import { Answer, ExerciseData, ID, QuestionState, StepBase, StepWithData } from '../../src/types';
 import { InnerStepCard, OuterStepCard, TaskStepCard, TaskStepCardProps } from './Card';
 import { Content } from './Content';
@@ -12,8 +12,14 @@ import { ExerciseHeaderIcons } from './ExerciseHeaderIcons';
 import { TypesetMathContext } from '../hooks/useTypesetMath';
 
 const StyledTaskStepCard = styled(TaskStepCard)`
-  font-size: 1.8rem;
-  line-height: 2.8rem;
+  font-size: calc(1.8rem * var(--content-text-scale));
+  line-height: calc(2.8rem * var(--content-text-scale));
+`;
+
+const GlobalStyle = createGlobalStyle`
+  :root {
+    --content-text-scale: 1;
+  }
 `;
 
 const ToolbarWrapper = styled.div<{
@@ -151,9 +157,9 @@ export interface ExerciseWithQuestionStatesProps extends ExerciseBaseProps {
   onAnswerChange: (answer: Omit<Answer, 'id'> & { id: number, question_id: number }) => void;
 }
 
-export const Exercise = ({
+export const Exercise = styled(({
   numberOfQuestions, questionNumber, step, exercise, show_all_feedback, scrollToQuestion, exerciseIcons, ...props
-}: ExerciseWithStepDataProps | ExerciseWithQuestionStatesProps) => {
+}: { className?: string } & (ExerciseWithStepDataProps | ExerciseWithQuestionStatesProps)) => {
   const legacyStepRender = 'feedback_html' in step;
   const questionsRef = React.useRef<Array<HTMLDivElement>>([]);
   const container = React.useRef<HTMLDivElement>(null);
@@ -175,6 +181,7 @@ export const Exercise = ({
   const mobileToolbarEnabled = Object.values(exerciseIcons || {}).some(({ location }) => location?.toolbar?.mobile);
 
   return <TypesetMathContext.Provider value={typesetExercise}>
+    <GlobalStyle />
     <TaskStepCardWithToolbar
       step={step}
       questionNumber={questionNumber}
@@ -184,6 +191,7 @@ export const Exercise = ({
       desktopToolbarEnabled={desktopToolbarEnabled}
       mobileToolbarEnabled={mobileToolbarEnabled}
       {...(exerciseIcons ? { exerciseIcons: exerciseIcons } : null)}
+      className={props.className}
     >
       <div ref={container}>
         <Preamble exercise={exercise} />
@@ -217,4 +225,5 @@ export const Exercise = ({
       </div>
     </TaskStepCardWithToolbar>
   </TypesetMathContext.Provider>;
-};
+})`
+`;

src/components/Question.tsx

@@ -13,7 +13,7 @@ const StyledQuestion = styled.div`
 
 &.openstax-question {
   border-top: 1px solid ${colors.palette.pale};
-  font-size: 1.8rem;
+  font-size: calc(1.8rem * var(--content-text-scale));
 
   .detailed-solution {
     margin-bottom: 1rem;
@@ -42,8 +42,8 @@ const StyledQuestion = styled.div`
 
   .answers-table {
     margin-bottom: 20px;
-    font-size: 1.6rem;
-    line-height: 2rem;
+    font-size: calc(1.6rem * var(--content-text-scale));
+    line-height: calc(2rem * var(--content-text-scale));
   }
 
   .instructions {

src/components/StepCardFooter.tsx

@@ -6,9 +6,10 @@ export const StepCardFooter = styled.div`
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-    font-size: 1.4rem;
-    line-height: 2rem;
+    font-size: calc(1.4rem * var(--content-text-scale));
+    line-height: calc(2rem * var(--content-text-scale));
     background: ${colors.card.body.background};
+    overflow: auto;
 
     > * {
         flex-grow: 1;

src/theme.ts

@@ -208,7 +208,7 @@ export const mixins = {
     margin: calc(${layouts.popover.arrow.height} - 14px) 0 ${layouts.answer.horizontalSpacing} 8px;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
     color: ${colors.palette.neutralThin};
-    font-size: 1.4rem;
+    font-size: calc(1.4rem * var(--content-text-scale));
 
     .arrow {
       position: absolute;