From 4a9f7b4cbe517022b092da0fd00ef1a62dae9ab1 Mon Sep 17 00:00:00 2001 From: Lorenzo Corallo Date: Wed, 26 Apr 2023 16:15:16 +0200 Subject: [PATCH 1/9] style(TopControls): better mobile support --- .../QuestionsForm/QuestionsForm.tsx | 2 +- src/components/QuestionsForm/SectionRecap.tsx | 3 +- src/components/QuestionsForm/Timer.tsx | 13 +-- src/components/QuestionsForm/TopControls.tsx | 94 ++++++++++++------- 4 files changed, 66 insertions(+), 46 deletions(-) diff --git a/src/components/QuestionsForm/QuestionsForm.tsx b/src/components/QuestionsForm/QuestionsForm.tsx index d7ad8f9..1f91387 100644 --- a/src/components/QuestionsForm/QuestionsForm.tsx +++ b/src/components/QuestionsForm/QuestionsForm.tsx @@ -234,7 +234,7 @@ export default function QuestionsForm(props: QuestionsFormProps) { active={view == 'TOL-testing'} answers={answers} closeSection={closeSection} - exitTest={handleExitTest} + onExitTest={handleExitTest} currentSection={currentSection} questions={props.questions} timer={timer} diff --git a/src/components/QuestionsForm/SectionRecap.tsx b/src/components/QuestionsForm/SectionRecap.tsx index 8709f6c..73cc8e5 100644 --- a/src/components/QuestionsForm/SectionRecap.tsx +++ b/src/components/QuestionsForm/SectionRecap.tsx @@ -10,7 +10,8 @@ const styles = StyleSheet.create({ paddingTop: '10px', paddingBottom: '20px', alignItems: 'center', - flexDirection: 'column' + flexDirection: 'column', + textAlign: 'center' } }) diff --git a/src/components/QuestionsForm/Timer.tsx b/src/components/QuestionsForm/Timer.tsx index cf819bf..9bc9176 100644 --- a/src/components/QuestionsForm/Timer.tsx +++ b/src/components/QuestionsForm/Timer.tsx @@ -41,7 +41,7 @@ const styles = StyleSheet.create({ }, p: { display: 'flex', - fontSize: '0.75em', + fontSize: '0.8em', maxWidth: '12em', textAlign: 'left', wordWrap: 'normal' @@ -56,16 +56,7 @@ export default function Timer(props: TimerProps) { const { timer } = props return ( -
+
void - exitTest: () => void + onExitTest: () => void currentSection: Section timer: TimerResult questions: QuestionsData @@ -53,36 +62,55 @@ interface TopControlsProps { export default function TopControls(props: TopControlsProps) { const { mobile } = useContext(MobileContext) - const { currentSection } = props + const { timer, active } = props - return ( -
-
-
-

- Sezione: {getSectionName(currentSection)}
- Riposte:{' '} - { - props.answers[currentSection].filter((a) => !!a.letter).length - } / {props.questions[currentSection].length} - {mobile &&
} - {props.active && - ` (${props.answers[currentSection].reduce( - (acc, curr) => acc + (curr.flagged ? 1 : 0), - 0 - )} da rivedere)`} -

-
- {props.active && ( - <> - - - )} + return mobile ? ( +
+
+ +
- + + {active && ( +
+ +
+ )}
+ ) : ( +
+ + {active && ( +
+ +
+ )} + +
+ ) +} + +function SectionInfo(props: TopControlsProps) { + const { currentSection, answers, questions, active } = props + const { mobile } = useContext(MobileContext) + return ( +

+ Sezione: {getSectionName(currentSection)}
+ Risposte: { + answers[currentSection].filter((a) => !!a.letter).length + } / {questions[currentSection].length} + {mobile &&
} + {active && + ` (${props.answers[currentSection].reduce( + (acc, curr) => acc + (curr.flagged ? 1 : 0), + 0 + )} da rivedere)`} +

) } From 21b416f627b614c791e1732f3ee0b32642c7ecd5 Mon Sep 17 00:00:00 2001 From: Lorenzo Corallo Date: Wed, 26 Apr 2023 16:19:28 +0200 Subject: [PATCH 2/9] style(Home): fix DSA-info indent - remove
- add max-width --- src/components/pages/Home.tsx | 5 ++++- src/locales/en.json | 2 +- src/locales/it.json | 2 +- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx index beedc33..9b5346e 100644 --- a/src/components/pages/Home.tsx +++ b/src/components/pages/Home.tsx @@ -18,6 +18,9 @@ const styles = StyleSheet.create({ display: 'flex', fontSize: 14, gap: 6 + }, + dsaInfo: { + maxWidth: '755px' } }) @@ -62,7 +65,7 @@ export default function Home({ viewState }: InfoStartProps) {
} open={isDsa} transitionTime={150}> -

+

home.dsaInfo

diff --git a/src/locales/en.json b/src/locales/en.json index 01b59e7..950d4dc 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -5,7 +5,7 @@ "languageInfo": "*The test simulation will be in Italian", "startBtn": "Start the test", "dsaBtn": "Student with SLD", - "dsaInfo": "Students with Specific Learning Disorders (SLD) taking the TOL are eligible for an additional 30 percent time, provided they disclose it when registering for the test. A certification stating the SLD diagnosis is also required.
Selecting \"Student with SLD\" will apply the bonus time in this simulation as well." + "dsaInfo": "Students with Specific Learning Disorders (SLD) taking the TOL are eligible for an additional 30 percent time, provided they disclose it when registering for the test. A certification stating the SLD diagnosis is also required. Selecting \"Student with SLD\" will apply the bonus time in this simulation as well." }, "about": { "main": "In order to be admitted to the Engineering school of Politecnico di Milano (PoliMi), the aspiring freshmen must pass the admission test (TOL).
Among the resources that PoliMi offers for free to prepare, you can find: the Politest, a collection of commented and solved exercises, the DOL, an online demo with a limited number of questions, and two complete self-assessment tests (pdf with questions, xls with exact answers).

Thus, we did not have a complete, web-based TOL simulation, that is, in the same environment in which the future freshmen will take the admission test.
We have set ourself the goal of creating a complete and free TOL simulation, in order to provide aspiring freshmen with a familiar environment in which to practice, very similar to the one they will encounter at the admission test.
The project is fully managed by students, from developing the web application to creating the TOL questions.", diff --git a/src/locales/it.json b/src/locales/it.json index 46c62aa..e65ebdd 100644 --- a/src/locales/it.json +++ b/src/locales/it.json @@ -5,7 +5,7 @@ "languageInfo": "", "startBtn": "Inizia il test", "dsaBtn": "Studente con DSA", - "dsaInfo": "Gli studenti con Disturbi Specifici dell'Apprendimento (DSA) che affrontano il TOL, possono usufruire di un tempo supplementare pari al 30%, previa segnalazione in fase di iscrizione al test. È inoltre richiesta una certificazione attestante la diagnosi di DSA.
Selezionando \"Studente con DSA\" verrà applicato il tempo bonus in questa simulazione." + "dsaInfo": "Gli studenti con Disturbi Specifici dell'Apprendimento (DSA) che affrontano il TOL possono usufruire di un tempo supplementare pari al 30%, previa segnalazione in fase di iscrizione al test. È inoltre richiesta una certificazione attestante la diagnosi di DSA. Selezionando \"Studente con DSA\" verrà applicato il tempo bonus in questa simulazione." }, "about": { "main": "Per poter essere ammessi alla scuola di Ingegneria del Politecnico di Milano (PoliMi), le aspiranti matricole devono superare il test di ammissione (TOL).
Tra le risorse che il PoliMi offre gratuitamente per prepararsi abbiamo: il Politest, una raccolta di esercizi commentati e risolti, la DOL, una demo online con un numero ridotto di domande, e due test di autovalutazione completi (pdf con domande, xls con risposte esatte).

Non avevamo dunque una simulazione TOL completa e basata sul web, ovvero nello stesso ambiente in cui le future matricole sosterranno il test di ammissione.
Ci siamo posti l'obiettivo di creare una simulazione TOL completa e gratuita, al fine di fornire alle aspiranti matricole un ambiente familiare dove esercitarsi, molto simile a quello che incontreranno al test di ammissione.
Il progetto è completamente gestito dagli studenti, dallo sviluppo dell'applicazione web alla creazione delle domande TOL. ", From 4c9da0460d2b110236e93f0d02bcd2882012280c Mon Sep 17 00:00:00 2001 From: Lorenzo Corallo Date: Wed, 26 Apr 2023 16:23:05 +0200 Subject: [PATCH 3/9] style: adjust icons and page layout of results PDF --- .../ExtendCorrection/ExtendedCorrection.css | 14 ++++++-------- .../ExtendCorrection/ExtendedCorrection.tsx | 7 +++++-- src/components/Util/Question.tsx | 12 ++++++++---- 3 files changed, 19 insertions(+), 14 deletions(-) diff --git a/src/components/ExtendCorrection/ExtendedCorrection.css b/src/components/ExtendCorrection/ExtendedCorrection.css index 8f2a55f..9dea333 100644 --- a/src/components/ExtendCorrection/ExtendedCorrection.css +++ b/src/components/ExtendCorrection/ExtendedCorrection.css @@ -8,20 +8,22 @@ } @media print { + @page { + size: A4; + margin: 20mm !important; + } html, body { height: initial !important; overflow: initial !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; - } -} -@media print { + } .page-break { margin-top: 1rem; display: block; - page-break-before: always; + page-break-before: always !important; } .print-only { display: block; @@ -34,7 +36,3 @@ } } -@page { - size: auto; - margin: 20mm !important; -} diff --git a/src/components/ExtendCorrection/ExtendedCorrection.tsx b/src/components/ExtendCorrection/ExtendedCorrection.tsx index 90c39e5..c23f982 100644 --- a/src/components/ExtendCorrection/ExtendedCorrection.tsx +++ b/src/components/ExtendCorrection/ExtendedCorrection.tsx @@ -24,7 +24,10 @@ const styles = StyleSheet.create({ padding: '15px', gap: '10px' }, - doc: {}, + printDoc: { + maxWidth: '210mm', + margin: '0 auto' + }, printButton: { display: 'inline-flex', alignItems: 'center', @@ -144,7 +147,7 @@ const PrintDocument = forwardRef( ) return ( -
+

diff --git a/src/components/Util/Question.tsx b/src/components/Util/Question.tsx index 7567b8d..413e9dc 100644 --- a/src/components/Util/Question.tsx +++ b/src/components/Util/Question.tsx @@ -10,18 +10,22 @@ const styles = StyleSheet.create({ }, option: { display: 'flex', - gap: 4, - margin: 4 + gap: 8, + margin: '4px 0' }, result: { textDecoration: 'underline', paddingTop: 4, display: 'block' + }, + icon: { + width: '10px', + height: '10px' } }) const TickSign = () => <>✓ -const CrossSign = () => <>✗ +const CrossSign = () => <>✕ interface Props { q: IQuestion @@ -65,7 +69,7 @@ export default function Question({ const visibility = isCorrect || choice === letter ? 'visible' : 'hidden' return (

- + {isCorrect ? : } {letter.toUpperCase()}. From 94d8b073a26cc1e42217acad8bec219fde910c82 Mon Sep 17 00:00:00 2001 From: Lorenzo Corallo Date: Wed, 26 Apr 2023 16:35:25 +0200 Subject: [PATCH 4/9] style: fix PDF style on Firefox Android + add Wrapper to Results - add prop 'center' to Wrapper - add Wrapper to Results with 'center: false' (max-width) - fix question break in PDF via css (Firefox Android) --- .../ExtendCorrection/ExtendedCorrection.css | 3 + .../ExtendCorrection/ExtendedCorrection.tsx | 3 - src/components/Util/Wrapper.tsx | 41 +++-- src/components/pages/Results.tsx | 153 +++++++++--------- 4 files changed, 105 insertions(+), 95 deletions(-) diff --git a/src/components/ExtendCorrection/ExtendedCorrection.css b/src/components/ExtendCorrection/ExtendedCorrection.css index 9dea333..66a3f54 100644 --- a/src/components/ExtendCorrection/ExtendedCorrection.css +++ b/src/components/ExtendCorrection/ExtendedCorrection.css @@ -28,6 +28,9 @@ .print-only { display: block; } + .print-only li { + page-break-inside: avoid; + } div { break-inside: avoid; } diff --git a/src/components/ExtendCorrection/ExtendedCorrection.tsx b/src/components/ExtendCorrection/ExtendedCorrection.tsx index c23f982..29bc0ee 100644 --- a/src/components/ExtendCorrection/ExtendedCorrection.tsx +++ b/src/components/ExtendCorrection/ExtendedCorrection.tsx @@ -41,9 +41,6 @@ const styles = StyleSheet.create({ centered: { textAlign: 'center' }, - li: { - margin: '10px' - }, ul: { listStyleType: 'none' }, diff --git a/src/components/Util/Wrapper.tsx b/src/components/Util/Wrapper.tsx index 8c066ae..ef08dd0 100644 --- a/src/components/Util/Wrapper.tsx +++ b/src/components/Util/Wrapper.tsx @@ -1,27 +1,34 @@ import { StyleSheet } from '../../utils/style' -const styles = StyleSheet.create({ - wrapper: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - margin: '10px auto', - marginBlock: '16px', - maxWidth: 900, - textAlign: 'center' - }, - h2: { - fontSize: '16pt' - } -}) - interface Props extends React.HTMLAttributes { title?: string + center?: boolean } -export default function Wrapper({ children, style, title, ...props }: Props) { +export default function Wrapper({ + children, + center = true, + style, + title, + ...props +}: Props) { + const styles = StyleSheet.create({ + wrapper: { + display: 'flex', + flexDirection: 'column', + alignItems: center ? 'center' : 'flex-start', + margin: '10px auto', + marginBlock: '16px', + maxWidth: 900, + textAlign: center ? 'center' : 'initial', + ...style + }, + h2: { + fontSize: '16pt' + } + }) return ( -

+
{title &&

{title}

} {children}
diff --git a/src/components/pages/Results.tsx b/src/components/pages/Results.tsx index dd90291..462afff 100644 --- a/src/components/pages/Results.tsx +++ b/src/components/pages/Results.tsx @@ -21,6 +21,7 @@ import { import { useEffect, useState } from 'react' import { statePair } from '../../utils/types' import { Trans, useTranslation } from 'react-i18next' +import Wrapper from '../Util/Wrapper' const styles = StyleSheet.create({ div: { @@ -218,89 +219,91 @@ export default function Results(props: ResultsProps) { ) return ( -
-
{resultTable()}
+ +
+
{resultTable()}
- setIsResultSaved(true)} - /> + setIsResultSaved(true)} + /> -
-

{t('results.pointsCalcTitle')}

-

- - results.pointsCalcBody1 - - {t('results.pointsCalcUl1')} -

    -
  • - - results.pointsCalcItem1 - -
    • -
  • - - results.pointsCalcItem2 - -
    • -
  • - - results.pointsCalcItem3 - -
    • -
- {t('results.pointsCalcUl2')} -
    - {Object.entries(sectionInfo).map(([, info], index) => ( -
  • - {typeof info.coeff == 'number' - ? formatNumber(info.coeff) - : info.coeff.toFraction()} +
    +

    {t('results.pointsCalcTitle')}

    +

    + + results.pointsCalcBody1 + + {t('results.pointsCalcUl1')} +

      +
    • - results.pointsCalcItem4 + results.pointsCalcItem1
      • - ))} -
    - results.pointsCalcBody2 -

    -
    -

    {t('results.saveReminder')}

    -
+ {t('results.pointsCalcUl2')} +
    + {Object.entries(sectionInfo).map(([, info], index) => ( +
  • + {typeof info.coeff == 'number' + ? formatNumber(info.coeff) + : info.coeff.toFraction()} + + results.pointsCalcItem4 + +
    • + ))} +
+ results.pointsCalcBody2 +

+
+

{t('results.saveReminder')}

+
-
+ ) } From e322e1ea313f7716b23ae1c69ff8cc06a5f9aa94 Mon Sep 17 00:00:00 2001 From: Lorenzo Corallo Date: Wed, 26 Apr 2023 16:36:29 +0200 Subject: [PATCH 5/9] style(Button): add cursor pointer --- src/components/Util/Button.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Util/Button.tsx b/src/components/Util/Button.tsx index 1b9deb3..1ae8083 100644 --- a/src/components/Util/Button.tsx +++ b/src/components/Util/Button.tsx @@ -5,7 +5,8 @@ const styles = StyleSheet.create({ display: 'flex', fontFamily: ' Arial', fontSize: '9.5pt', - alignItems: 'center' + alignItems: 'center', + cursor: 'pointer' }, p: { display: 'inline-block', From edefdb68f0d16e98aecd68eefbe12bfe64243842 Mon Sep 17 00:00:00 2001 From: Lorenzo Corallo Date: Wed, 26 Apr 2023 16:37:21 +0200 Subject: [PATCH 6/9] style(Results): fix overflow-x on mobile (caused by score table) --- src/components/pages/Results.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/pages/Results.tsx b/src/components/pages/Results.tsx index 462afff..acfc528 100644 --- a/src/components/pages/Results.tsx +++ b/src/components/pages/Results.tsx @@ -33,7 +33,8 @@ const styles = StyleSheet.create({ tableDiv: { alignSelf: 'center', width: '100%', - overflow: 'auto', + maxWidth: '90vw', + overflowX: 'auto', display: 'flex' }, table: { borderSpacing: 0, margin: 'auto' }, From 3fd67fbaaba7e81530cccf428fb5e2ddbb300a7a Mon Sep 17 00:00:00 2001 From: Lorenzo Corallo Date: Wed, 26 Apr 2023 16:38:13 +0200 Subject: [PATCH 7/9] style(Footer): add max-width for style coherence - remove useless and buggy padding-inline - add max-width similar to Wrapper prop - add 'marginX: auto' to center it --- src/components/Footer.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 343b5ea..220c6f0 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -8,10 +8,11 @@ const styles = StyleSheet.create({ container: { display: 'flex', justifyContent: 'space-between', - paddingInline: '15em', - margin: '15px', + margin: '15px auto', fontSize: '10pt', - color: theme.softBlack + color: theme.softBlack, + width: '100%', + maxWidth: 900 }, link: { display: 'flex', From 18ef6a50abfe643cf872801f017d4605bdd5ae74 Mon Sep 17 00:00:00 2001 From: Lorenzo Corallo Date: Wed, 26 Apr 2023 17:01:09 +0200 Subject: [PATCH 8/9] style(Wrapper): remove duplicate margin --- src/components/Util/Wrapper.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Util/Wrapper.tsx b/src/components/Util/Wrapper.tsx index ef08dd0..ea66cd0 100644 --- a/src/components/Util/Wrapper.tsx +++ b/src/components/Util/Wrapper.tsx @@ -18,7 +18,6 @@ export default function Wrapper({ flexDirection: 'column', alignItems: center ? 'center' : 'flex-start', margin: '10px auto', - marginBlock: '16px', maxWidth: 900, textAlign: center ? 'center' : 'initial', ...style From ef619eac085d7660ca9a7304f6f74a6298d87782 Mon Sep 17 00:00:00 2001 From: Lorenzo Corallo Date: Fri, 28 Apr 2023 19:02:50 +0200 Subject: [PATCH 9/9] fix: resolve merge conflicts --- src/components/pages/Results.tsx | 132 ++++++++++++++++--------------- 1 file changed, 68 insertions(+), 64 deletions(-) diff --git a/src/components/pages/Results.tsx b/src/components/pages/Results.tsx index ed292f7..905ee11 100644 --- a/src/components/pages/Results.tsx +++ b/src/components/pages/Results.tsx @@ -241,77 +241,81 @@ export default function Results(props: ResultsProps) { resultTable={resultTable()} onSave={() => setIsResultSaved(true)} /> - -
-

{t('results.pointsCalc.title')}

-

- - results.pointsCalc.body.1 - - {t('results.pointsCalc.ul.1')} -

    -
  • - - results.pointsCalc.ul.item.1 - -
    • -
  • - - results.pointsCalc.ul.item.2 - -
    • -
  • - - results.pointsCalc.ul.item.3 - -
    • -
- {t('results.pointsCalc.ul.2')} -
    - {Object.entries(sectionInfo).map(([, info], index) => ( -
  • - {typeof info.coeff == 'number' - ? formatNumber(info.coeff) - : info.coeff.toFraction()} + +
    +

    {t('results.pointsCalc.title')}

    +

    + + results.pointsCalc.body.1 + + {t('results.pointsCalc.ul.1')} +

      +
    • - results.pointsCalc.ul.item.4 + results.pointsCalc.ul.item.1
      • - ))} -
    - results.pointsCalc.body.2 -

    -
    -

    {t('results.saveReminder')}

    -
+ {t('results.pointsCalc.ul.2')} +
    + {Object.entries(sectionInfo).map(([, info], index) => ( +
  • + {typeof info.coeff == 'number' + ? formatNumber(info.coeff) + : info.coeff.toFraction()} + + results.pointsCalc.ul.item.4 + +
    • + ))} +
+ results.pointsCalc.body.2 +

+
+

{t('results.saveReminder')}

+