diff --git a/src/components/ExtendCorrection/ExtendedCorrection.css b/src/components/ExtendCorrection/ExtendedCorrection.css index 8f2a55f..66a3f54 100644 --- a/src/components/ExtendCorrection/ExtendedCorrection.css +++ b/src/components/ExtendCorrection/ExtendedCorrection.css @@ -8,24 +8,29 @@ } @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; } + .print-only li { + page-break-inside: avoid; + } div { break-inside: avoid; } @@ -34,7 +39,3 @@ } } -@page { - size: auto; - margin: 20mm !important; -} diff --git a/src/components/ExtendCorrection/ExtendedCorrection.tsx b/src/components/ExtendCorrection/ExtendedCorrection.tsx index f9f1938..3c1ad1d 100644 --- a/src/components/ExtendCorrection/ExtendedCorrection.tsx +++ b/src/components/ExtendCorrection/ExtendedCorrection.tsx @@ -27,7 +27,10 @@ const styles = StyleSheet.create({ padding: '15px', gap: '10px' }, - doc: {}, + printDoc: { + maxWidth: '210mm', + margin: '0 auto' + }, printButton: { display: 'inline-flex', alignItems: 'center', @@ -41,9 +44,6 @@ const styles = StyleSheet.create({ centered: { textAlign: 'center' }, - li: { - margin: '10px' - }, ul: { listStyleType: 'none' }, @@ -151,7 +151,7 @@ const PrintDocument = forwardRef( ) return ( -
+

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', 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)`} +

) } 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', 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()}. diff --git a/src/components/Util/Wrapper.tsx b/src/components/Util/Wrapper.tsx index 8c066ae..ea66cd0 100644 --- a/src/components/Util/Wrapper.tsx +++ b/src/components/Util/Wrapper.tsx @@ -1,27 +1,33 @@ 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', + maxWidth: 900, + textAlign: center ? 'center' : 'initial', + ...style + }, + h2: { + fontSize: '16pt' + } + }) return ( -

+
{title &&

{title}

} {children}
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/components/pages/Results.tsx b/src/components/pages/Results.tsx index af0e656..905ee11 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: { @@ -32,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' }, @@ -229,89 +231,93 @@ export default function Results(props: ResultsProps) { ) return ( -
-
{resultTable()}
+ +
+
{resultTable()}
- setIsResultSaved(true)} - /> + 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')}

+
-
+ ) } diff --git a/src/locales/en.json b/src/locales/en.json index 44324b8..ed513e1 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 0989146..1dc14cc 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. ",