Skip to content

Commit

Permalink
feat(i18n): add translations for Firefox results save instructions (#89)
Browse files Browse the repository at this point in the history 
* feat(i18n): add translations for Firefox results save instructions

* feat(i18n): add screenshots in English for Firefox instructions

* chore(i18n): add visual hierarchy to results translations

+ some words changed

---------

Co-authored-by: Federico Grandi <fgrandi30@gmail.com>
  • Loading branch information
@lorenzocorallo @EndBug
lorenzocorallo and EndBug committed Apr 28, 2023
1 parent 0ef5991 commit 8212f9e
Show file tree
Hide file tree
Showing 9 changed files with 214 additions and 108 deletions.
96 changes: 59 additions & 37 deletions src/components/ExtendCorrection/ExtendedCorrection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,12 @@ import DocumentHeader from './DocumentHeader'
import firefoxImg1 from '../../static/firefox_1.png'
import firefoxImg2 from '../../static/firefox_2.png'
import firefoxImg3 from '../../static/firefox_3.png'
import firefoxImg2En from '../../static/firefox_2_en.png'
import firefoxImg3En from '../../static/firefox_3_en.png'
import Question from '../Util/Question'
import { Trans, useTranslation } from 'react-i18next'

const IMG_WIDTH = 320
const styles = StyleSheet.create({
collapsible: {
display: 'flex',
Expand Down Expand Up @@ -45,12 +48,16 @@ const styles = StyleSheet.create({
listStyleType: 'none'
},
ol: {
paddingLeft: 20
paddingLeft: 20,
maxWidth: IMG_WIDTH,
margin: '0 auto',
textAlign: 'left',
gap: 10
},
img: {
marginTop: 5,
marginBottom: 10,
maxWidth: 320,
maxWidth: IMG_WIDTH,
width: '100%',
height: 'auto',
objectFit: 'cover'
Expand Down Expand Up @@ -101,7 +108,7 @@ export default function ExtendedCorrection(props: ExtendedCorrectionProps) {
<ReactToPrint
documentTitle={getTitle()}
content={() => ref.current}
trigger={() => <Button label={t('results.saveBtn')} />}
trigger={() => <Button label={t('results.btn.save')} />}
onAfterPrint={props.onSave}
/>
</div>
Expand Down Expand Up @@ -149,23 +156,28 @@ const PrintDocument = forwardRef<HTMLDivElement, ExtendedCorrectionProps>(
<DocumentHeader />
<p style={styles.centered}>
<Trans i18n={i18n} values={{ date: date.date, time: date.time }}>
results.pdfTitle
results.pdf.title
</Trans>
</p>
{resultTable}
<p>
{t('results.pdfInfo1')}
<a
href={links.telegramPreparazioneTOL}
target="_blank"
rel="noreferrer noopener"
style={styles.link}
<Trans
i18n={i18n}
components={{
tg: (
<a
href={links.telegramPreparazioneTOL}
target="_blank"
rel="noreferrer noopener"
style={styles.link}
/>
)
}}
>
{t('results.tgGroup')}
</a>
!
results.pdf.info.1
</Trans>
</p>
<p>{t('results.pdfInfo2')}</p>
<p>{t('results.pdf.info.2')}</p>
</div>
{(Object.entries(questions) as [Section, IQuestion[]][])
.sort((a, b) => sectionInfo[a[0]].order - sectionInfo[b[0]].order)
Expand Down Expand Up @@ -193,44 +205,54 @@ const PrintDocument = forwardRef<HTMLDivElement, ExtendedCorrectionProps>(
PrintDocument.displayName = 'Document'

function FirefoxInstructions() {
const { t, i18n } = useTranslation()
return (
<div className="do-not-print">
<h3>Salva i tuoi risultati</h3>
<p>Il tuo browser (Firefox Android) non supporta la stampa automatica.</p>
<p>Per salvare i risultati segui questi passaggi: </p>
<h3>{t('results.save.title')}</h3>
<p>{t('results.save.firefox.body.1')}</p>
<p>{t('results.save.firefox.body.2')}</p>
<ol style={styles.ol}>
<li>Apri il menu di Firefox</li>
<li>{t('results.save.firefox.li.1')}</li>
<img src={firefoxImg1} style={styles.img} />

<li>Premi il tasto per condividere</li>
<img src={firefoxImg2} style={styles.img} />
<li>{t('results.save.firefox.li.2')}</li>
<img
src={i18n.language.startsWith('en') ? firefoxImg2En : firefoxImg2}
style={styles.img}
/>

<li>Nel menu che si apre, premi su "Salva come PDF"</li>
<img src={firefoxImg3} style={styles.img} />
<li>{t('results.save.firefox.li.3')}</li>
<img
src={i18n.language.startsWith('en') ? firefoxImg3En : firefoxImg3}
style={styles.img}
/>
</ol>
</div>
)
}

function FallbackInstructions() {
const { t, i18n } = useTranslation()
return (
<div className="do-not-print">
<h3>Salva i tuoi risultati</h3>
<p>
Per il tuo browser non è supportata la stampa automatica del PDF con i
risultati.
</p>
<p>
Puoi provare ad utilizzare la funzione "Sala come PDF" del tuo browser
che potrebbe essere nel menu di condivisione oppure nel menu principale
del browser.
</p>
<h3>{t('results.save.title')}</h3>
<p>{t('results.save.fallback.1')}</p>
<p>{t('results.save.fallback.2')}</p>
<p>
Ti invitiamo a segnalare il tuo browser{' '}
<a href="https://github.com/PoliNetworkOrg/TheTOLProject/issues/35">
qui
</a>{' '}
in modo da poter risolvere il problema{' '}
<Trans
i18n={i18n}
components={{
issue: (
<a
href="https://github.com/PoliNetworkOrg/TheTOLProject/issues/35"
rel="noreferrer noopener"
target="_blank"
/>
)
}}
>
results.save.fallback.3
</Trans>
</p>
</div>
)
Expand Down
44 changes: 26 additions & 18 deletions src/components/pages/Results.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,12 +172,12 @@ export default function Results(props: ResultsProps) {
<br />
TOL{' '}
{testPassed
? `${t('results.testPassed')} ${!tengPassed ? ' (OFA TENG)' : ''}`
: `${t('results.testFailed')}: OFA TEST${
? `${t('results.test.passed')} ${!tengPassed ? ' (OFA TENG)' : ''}`
: `${t('results.test.failed')}: OFA TEST${
!tengPassed ? ' + OFA TENG' : ''
}`}
<br />
{t('results.testPoints')}: {formatNumber(score)} /{' '}
{t('results.test.points')}: {formatNumber(score)} /{' '}
{formatNumber(testTotalScore)} ({formatNumber(score, true)})
</p>
<br />
Expand All @@ -186,11 +186,19 @@ export default function Results(props: ResultsProps) {
<table style={styles.table}>
<tr>
<td></td>
<td style={styles.tableHeader}>{t('results.tableHeader1')}</td>
<td style={styles.tableHeader}>{t('results.tableHeader2')}</td>
<td style={styles.tableHeader}>{t('results.tableHeader3')}</td>
<td style={styles.tableHeader}>{t('results.tableHeader4')}</td>
<td style={styles.tableHeader}>{t('results.tableHeader5')}</td>
<td style={styles.tableHeader}>
{t('results.table.header.score')}
</td>
<td style={styles.tableHeader}>{t('results.table.header.numQ')}</td>
<td style={styles.tableHeader}>
{t('results.table.header.correct')}
</td>
<td style={styles.tableHeader}>
{t('results.table.header.wrong')}
</td>
<td style={styles.tableHeader}>
{t('results.table.header.notGiven')}
</td>
</tr>
{(
Object.entries(correctionGrid) as [
Expand Down Expand Up @@ -229,7 +237,7 @@ export default function Results(props: ResultsProps) {
/>

<div className="do-not-print">
<h3 style={styles.h3}>{t('results.pointsCalcTitle')}</h3>
<h3 style={styles.h3}>{t('results.pointsCalc.title')}</h3>
<p style={styles.p}>
<Trans
i18n={i18n}
Expand All @@ -240,17 +248,17 @@ export default function Results(props: ResultsProps) {
v4: formatNumber(tengPassThreshold)
}}
>
results.pointsCalcBody1
results.pointsCalc.body.1
</Trans>
<Trans i18n={i18n}>{t('results.pointsCalcUl1')}</Trans>
<Trans i18n={i18n}>{t('results.pointsCalc.ul.1')}</Trans>
<ul>
<li>
<Trans
i18n={i18n}
values={{ v: formatNumber(correctionWeight.correct) }}
count={correctionWeight.correct === 1 ? 1 : 2}
>
results.pointsCalcItem1
results.pointsCalc.ul.item.1
</Trans>
</li>
<li>
Expand All @@ -259,7 +267,7 @@ export default function Results(props: ResultsProps) {
values={{ v: formatNumber(correctionWeight.wrong) }}
count={correctionWeight.wrong === 1 ? 1 : 2}
>
results.pointsCalcItem2
results.pointsCalc.ul.item.2
</Trans>
</li>
<li>
Expand All @@ -268,11 +276,11 @@ export default function Results(props: ResultsProps) {
values={{ v: formatNumber(correctionWeight.notGiven) }}
count={correctionWeight.notGiven === 1 ? 1 : 2}
>
results.pointsCalcItem3
results.pointsCalc.ul.item.3
</Trans>
</li>
</ul>
{t('results.pointsCalcUl2')}
{t('results.pointsCalc.ul.2')}
<ul>
{Object.entries(sectionInfo).map(([, info], index) => (
<li key={index}>
Expand All @@ -285,17 +293,17 @@ export default function Results(props: ResultsProps) {
sec: info.name
}}
>
results.pointsCalcItem4
results.pointsCalc.ul.item.4
</Trans>
</li>
))}
</ul>
<Trans i18n={i18n}>results.pointsCalcBody2</Trans>
<Trans i18n={i18n}>results.pointsCalc.body.2</Trans>
</p>
<div style={styles.restartDiv}>
<h3 style={styles.restartTitle}>{t('results.saveReminder')}</h3>
<Button
label={t('results.homeBtn')}
label={t('results.btn.home')}
style={styles.restartButton}
onClick={handleNewTest}
/>
Expand Down
92 changes: 65 additions & 27 deletions src/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,36 +20,74 @@
"main": "<title>The TOL Project</title> by <network>PoliNetwork</network> is licensed under a <cc4>Creative Commons Attribution-ShareAlike 4.0 International License</cc4> <br/> Permissions beyond the scope of this license may be available <githubLicense>here</githubLicense>."
},
"privacy": {
"localStorage": "This website uses the browser <link /> to save user preferences, for example the test mode (regular or DSA) or the website language. These settings are never sent to any server, instead they are handled locally by the browser. Moreover, preferences are deleted after 6 months from the last change."
"localStorage": "This website uses the browser <link /> to save user preferences, for example the test mode (regular or SLD) or the website language. These settings are never sent to any server, instead they are handled locally by the browser. Moreover, preferences are deleted after 6 months from the last change."
},
"results": {
"exitWarn": "You did not save your results. Are you sure you want to exit?",
"testPassed": "passed",
"testFailed": "failed",
"testPoints": "Score",
"tableHeader1": "Section score",
"tableHeader2": "Num. of questions",
"tableHeader3": "Correct",
"tableHeader4": "Wrong",
"tableHeader5": "Not given",
"pointsCalcTitle": "How the score is calculated",
"pointsCalcBody1": "The <strong>maximum achievable score</strong> <strong>is {{v1}} </strong> and is expressed to the second decimal place. <br /> The attribution of <strong>OFA TEST</strong> (Obblighi Formativi Aggiunti) occurs when the test score, rounded to the nearest integer, <strong>is less than {{v2}}</strong>.<br /> The attribution of <strong>OFA TENG</strong> occurs when, considering only the {{v3}} section, the number of correct answers <strong>is less than {{v4}}</strong>. <br />",
"pointsCalcUl1": "The test <strong>score</strong> is calculated by assigning:",
"pointsCalcItem1_one": "{{v}} point for each correct answer",
"pointsCalcItem2_one": "{{v}} point for each wrong answer",
"pointsCalcItem3_one": "{{v}} point for each answer not given",
"pointsCalcItem1_other": "{{v}} points for each correct answer",
"pointsCalcItem2_other": "{{v}} points for each wrong answer",
"pointsCalcItem3_other": "{{v}} points for each answer not given",
"pointsCalcUl2": "and assigning a weight of",
"pointsCalcItem4": " for each question of {{sec}}",
"pointsCalcBody2": "The <strong>total score</strong> gets rounded to the nearest integer (e.g., 59,49 gets rounded to 59, while 59,50 to 60)",
"test": {
"passed": "passed",
"failed": "failed",
"points": "Score"
},
"table": {
"header": {
"score": "Section score",
"numQ": "Num. of questions",
"correct": "Correct",
"wrong": "Wrong",
"notGiven": "Not given"
}
},
"pointsCalc": {
"title": "How the score is calculated",
"body": {
"1": "The <strong>maximum achievable score</strong> <strong>is {{v1}} </strong> and is expressed to the second decimal place. <br /> The attribution of <strong>OFA TEST</strong> (Obblighi Formativi Aggiunti) occurs when the test score, rounded to the nearest integer, <strong>is less than {{v2}}</strong>.<br /> The attribution of <strong>OFA TENG</strong> occurs when, considering only the {{v3}} section, the number of correct answers <strong>is less than {{v4}}</strong>. <br />",
"2": "The <strong>total score</strong> gets rounded to the nearest integer (e.g., 59,49 gets rounded to 59, while 59,50 to 60)"
},
"ul":{
"1": "The test <strong>score</strong> is calculated by assigning:",
"2": "and assigning a weight of",
"item": {
"1_one": "{{v}} point for each correct answer",
"1_other": "{{v}} points for each correct answer",
"2_one": "{{v}} point for each wrong answer",
"2_other": "{{v}} points for each wrong answer",
"3_one": "{{v}} point for each answer not given",
"3_other": "{{v}} points for each answer not given",
"4": " for each question of {{sec}}"
}
}
},
"saveReminder": "Remember to save your results before starting a new test, or they will be lost!",
"homeBtn": "Go back to home",
"saveBtn": "Save test results",
"pdfTitle": "Simulation of {{- date}} at {{- time}}",
"pdfInfo1": "Do you have any doubts about the questions and their resolution? Ask on the ",
"tgGroup": "PoliNetwork's TOL Prepration Group",
"pdfInfo2": "On the following pages you will find, divided by section, the questions that have been proposed to you with the related outcome."
"btn": {
"home": "Go back to home",
"save": "Save test results"
},
"pdf": {
"title": "Simulation of {{- date}} at {{- time}}",
"info": {
"1": "Do you have any doubts about the questions and their resolution? Ask on the PoliNetwork's <tg>Gruppo Preparazione TOL</tg>!",
"2": "On the following pages you will find, divided by section, the questions that have been proposed to you with the related outcome."
}
},
"save": {
"title": "Save your results",
"firefox": {
"body": {
"1": "Your browser (Firefox Android) does not support automatic printing of the PDF with the results.",
"2": "Follow these instructions to save your results:"
},
"li": {
"1": "Open the Firefox menu",
"2": "Click on the share button",
"3": "In the menu that opens, press on \"Save as PDF\""
}
},
"fallback": {
"1": "Your browser does not support automatic printing of the PDF with the results.",
"2": "You can try using your browser's \"Save as PDF\" feature, which may be in the sharing menu or in the main browser menu.",
"3": "Please report your browser <issue>here</issue> so we can fix the problem."
}
}
}
}

0 comments on commit 8212f9e

Please sign in to comment.