oleh/Mini-VLAT-ua
1
0
Fork 0
mirror of https://github.com/olehomelchenko/Mini-VLAT-ua.git synced 2025-12-21 21:22:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

localize into Ukrainian

Browse Source
This commit is contained in:
Oleh Omelchenko
2025-01-08 13:44:05 +02:00
parent 62b975ab72
commit 7d69c673bb
5 changed files with 171 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
ReactTool/frontend/src/components/quiz.js
View File

@@ -1,6 +1,6 @@
const questions = [ const questions = [
{ {
question: "What was the price range of a barrel of oil in 2020?", question: "Яким був ціновий діапазон бареля нафти у 2020 році?",
optionA: "$16.55 - $57.52", optionA: "$16.55 - $57.52",
optionB: "$19.52 - $59.00", optionB: "$19.52 - $59.00",
optionC: "$23.43 - $60.72", optionC: "$23.43 - $60.72",
@@ -9,7 +9,7 @@ const questions = [
}, },
{ {
question: "What is the range of the average internet speed in Asia?", question: "Який діапазон середньої швидкості інтернету в Азії?",
optionA: "5.50Mbps - 30.60Mbps", optionA: "5.50Mbps - 30.60Mbps",
optionB: "7.00Mbps - 29.40Mbps", optionB: "7.00Mbps - 29.40Mbps",
optionC: "6.40Mbps - 27.38Mbps", optionC: "6.40Mbps - 27.38Mbps",
@@ -17,7 +17,7 @@ const questions = [
correctOption: "optionD", correctOption: "optionD",
}, },
{ {
question: "What is the cost of peanuts in Las Vegas?", question: "Яка ціна арахісу в Лас Веґасі?",
optionA: "$9.0", optionA: "$9.0",
optionB: "$6.1", optionB: "$6.1",
optionC: "$10.3", optionC: "$10.3",
@@ -26,7 +26,7 @@ const questions = [
}, },
{ {
question: "What is the approval rating of Republicans among the people who have the education level of Postgraduate Study?", question: "Який рейтинг схвалення республіканців серед людей, які мають освітній рівень післядипломної освіти?",
optionA: "35%", optionA: "35%",
optionB: "27%", optionB: "27%",
optionC: "23%", optionC: "23%",
@@ -35,7 +35,7 @@ const questions = [
}, },
{ {
question: "About what is the global smartphone market share of Samsung?", question: "Яку приблизно частку ринку смартфонів займає Samsung?",
optionA: "20%", optionA: "20%",
optionB: "25%", optionB: "25%",
optionC: "30%", optionC: "30%",
@@ -44,7 +44,7 @@ const questions = [
}, },
{ {
question: "How many people have rated the taxi between 4.2 and 4.4?", question: "Скільки людей оцінили таксі рейтингом між 4.2 та 4.4?",
optionA: "270", optionA: "270",
optionB: "190", optionB: "190",
optionC: "300", optionC: "300",
@@ -53,7 +53,7 @@ const questions = [
}, },
{ {
question: "There is a negative linear relationship between the height and the weight of the 85 males.", question: "Існує негативна лінійна залежність між ростом і вагою 85 чоловіків.",
optionA: "True", optionA: "True",
optionB: "False", optionB: "False",
optionC: "", optionC: "",
@@ -62,7 +62,7 @@ const questions = [
}, },
{ {
question: "What was the average price of a pound of coffee beans in September 2013?", question: "Якою була середня ціна фунту кавових бобів в вересні 2013?",
optionA: "$5.15", optionA: "$5.15",
optionB: "$6.2", optionB: "$6.2",
optionC: "$4.8", optionC: "$4.8",
@@ -71,7 +71,7 @@ const questions = [
}, },
{ {
question: "What was the number of girls named 'Olivia' in 2010 in the UK?", question: "Яку кількість дівчаток назвали «Олівія» у 2010 році у Великобританії?",
optionA: "2000", optionA: "2000",
optionB: "2500", optionB: "2500",
optionC: "1700", optionC: "1700",
@@ -80,7 +80,7 @@ const questions = [
}, },
{ {
question: "What is the total length of the metro system in Beijing?", question: "Яка загальна протяжність системи метро в Пекіні?",
optionA: "525 km", optionA: "525 km",
optionB: "495 km", optionB: "495 km",
optionC: "305 km", optionC: "305 km",
@@ -89,7 +89,7 @@ const questions = [
}, },
{ {
question: "In 2015, the unemployment rate for Washington (WA) was higher than that of Wisconsin (WI)", question: "У 2015 році рівень безробіття у Вашингтоні (WA) був вищим, ніж у Вісконсині (WI).",
optionA: "True", optionA: "True",
optionB: "False", optionB: "False",
optionC: "", optionC: "",
@@ -98,7 +98,7 @@ const questions = [
}, },
{ {
question: "For which website was the number of unique visitors the largest in 2010?", question: "Для якого сайту кількість унікальних відвідувачів була найбільшою в 2010 році?",
optionA: "Amazon", optionA: "Amazon",
optionB: "Chase", optionB: "Chase",
optionC: "PayPal", optionC: "PayPal",

70
ReactTool/frontend/src/pages/introduction.js
View File

@@ -47,58 +47,36 @@ class Intro extends Component {
return ( return (
<> <>
<Row className={'justify-content-center no-margin-row'}> <Row className={'justify-content-center no-margin-row'}>
<div className='heading-term'>Consent Form</div> <div className='heading-term'>Згода на участь в дослідженні з візуалізації даних</div>
<div className={'terms-container'}> <div className={'terms-container'}>
<div className='terms'> <div className='terms'>
<p>We invite you to participate in a research study being conducted by investigators from Washington University in St. Louis. You are being asked to participate in this research study because you are an English-speaking adult in the United States. The purpose of the study is to develop an instrument that measures how well people can read, understand, and use data visualizations to solve problems.</p> <p>
<p>If you agree to participate, we would like you to questions about a series of data visualization. For each question, you will see a data visualization and a problem to solve. Choose the BEST answer to the questions. If you are unsure, Select ''Skip'' instead of guessing. You are also free to skip any questions that you prefer not to answer. In the end, you will complete a brief demographic survey.</p> Запрошуємо взяти участь в дослідженні, що проводять викладачі та студенти Київської школи економіки. Ви запрошені взяти участь у цьому дослідженні, оскільки є дорослою людиною, яка володіє українською мовою. Мета дослідження полягає в адаптації інструменту, який вимірює, наскільки добре люди можуть зчитувати, розуміти та використовувати візуалізацію даних для вирішення проблем.
<p>We would like to use the data we are obtaining in this study for studies going on right now as well as studies that are conducted in the future.</p>
<p>These studies may provide additional information that will be helpful in developing better visual communication tools. It is unlikely that what we learn from these studies will have a direct benefit to you. There are no plans to provide financial compensation to you should this occur. By allowing us to use your data you give up any property rights you may have in the data.</p>
<p>We will share your data with other researchers. They may be doing research in areas similar to this research or in other unrelated areas. These researchers may be at Washington University, at other research centers and institutions, or industry sponsors of research. We may also share your research data with large data repositories (a repository is a database of information) for broad sharing with the research community. If your individual research data is placed in one of these repositories only qualified researchers, who have received prior approval from individuals that monitor the use of the data, will be able to look at your information.</p>
<p>Your data will be stored without your name or any other kind of link that would enable us to identify which data are yours. Therefore, it will be available indefinitely for use in future research studies without your additional consent and cannot be removed.</p>
{/* <p>Approximately 5100 people will take part in this study at Washington University.</p> */}
<p>There are no known risks from being in this study.</p>
<p>You will not benefit personally. However, we hope that others may benefit in the future from what we learn as a result of this study. You will not have any costs for being in this research study.</p>
<p>You will be paid for being in this research study. You will receive a pay of $8 for completing this quiz. At the end of the study, copy your survey code back to Prolific to receive your payment.</p>
<p>We will keep the information you provide confidentially. This survey is completely anonymous; we will not collect any personally identifiable information. We will only have access to your Prolific ID only, which we will use solely for payment purposes. </p>
<p>Any report or article that we write will not include information that can directly identify you. The journals that publish these reports or articles require that we share the information that was collected for this study with others to make sure the results of this study are correct and help develop new ideas for research. Your information will be shared in a way that cannot directly identify you.</p>
<p>Federal regulatory agencies and Washington University, including the Washington University Institutional Review Board (a committee that reviews and approves research studies) and the Human Research Protection Office, may inspect and copy records pertaining to this research.
Your participation in this study is completely voluntary. You may choose not to take part at all. If you decide to participate in the study, you may stop participating at any time. Any data that was collected as part of this study will remain as part of the study records and cannot be removed. If you decide not to take part in the study or if you stop participating at any time, you won’t be penalized or lose any benefits for which you otherwise qualify.
</p> </p>
<p>If you do not wish to participate in this study or want to end your participation in the study, close the browser tab without answering any of the questions.</p> <p>
Якщо ви погоджуєтеся взяти участь, запропонуємо вам дати відповіді щодо змісту декількох візуалізацій даних. Для кожного питання ви побачите візуалізацію даних та запитання, на яке потрібно дати відповідь. Виберіть відповідь на питання, яку вважаєте НАЙТОЧНІШОЮ. Якщо ви не впевнені, виберіть «Пропустити» замість того, щоб вгадувати. Ви також можете пропустити будь-які питання, на які ви вважаєте за краще не відповідати. У кінці ми попросимо вас заповнити короткий демографічний опитувальник.
<p> We encourage you to ask questions. If you have any questions about the research study itself, please contact Saugat Pandey (p.saugat@wustl.edu). If you feel you have been harmed from being in the study, please contact Alvitta Ottley (alvitta@wustl.edu). If you have questions, concerns, or complaints about your rights as a research participant, please contact the Human Research Protection Office at 1-(800)-438-0445 or email hrpo@wustl.edu. General information about being a research participant can be found on the Human Research Protection Office website, http://hrpo.wustl.edu. To offer input about your experiences as a research participant or to speak to someone other than the research staff, call the Human Research Protection Office at the number above.</p> </p>
<p>
<p>Thank you very much for your consideration of this research study.</p> Дані, які ми зберемо протягом цього опитування, будуть використані в поточному та подальших дослідженнях грамотності в сфері візуалізації даних.
</p>
{/* <p>
Ці дослідження можуть надати додаткову інформацію, яка буде корисною для розробки кращих інструментів візуальної комунікації. Скоріш за все знахідки з цих досліджень не будуть для вас прямої користі. Немає планів надавати вам фінансову компенсацію, якщо це станеться. Дозволивши нам використовувати ваші дані, ви відмовляєтеся від будь-яких прав власності, які ви можете мати на ці дані.
</p> */}
<p>
Зібрані дані будуть передаті іншим дослідникам, які проводитимуть дослідження в цій або суміжних сферах. Також ми можемо опублікувати зібрані дані в репозиторіях даних для широкого доступу до наукової спільноти. Якщо ваші індивідуальні дані будуть розміщені в одному з цих репозиторіїв, лише кваліфіковані дослідники, які отримали попередню згоду від осіб, які контролюють використання даних, зможуть переглядати вашу інформацію.
</p>
<p>
Ваші дані будуть збережені без вашого імені чи будь-якої іншої інформації, яка дозволила б нам ідентифікувати вас персонально. Тому вони будуть доступні безстроково для використання в майбутніх дослідженнях без вашої додаткової згоди та не можуть бути видалені.
</p>
<p>Участь в цьому дослідженні не містить для вас жодних відомих потенційних ризиків.</p>
<p>
Якщо ви маєте будь-які питання щодо змісту та деталей дослідження, будь-ласка напишіть Олегу Омельченко (o_omelchenko@kse.org.ua).
</p>
<p>Дякуємо за зацікавленість дослідженням!</p>
</div> </div>
{/* <p>Taking part in this research study is completely voluntary. You may choose not to take part at all.
If you decide to be in this study, you may stop participating at any time. Any data that was collected
as part of your participation in the study will remain as part of the study records and cannot be removed.
As a part of this study:
<ul>
<li><b>We will not collect your name or any identifying information about you. It will not be possible
to link you to your responses on the survey.</b></li>
<li>We will store you response to every question along with the time taken to solve every question and total score.</li>
{/* <li>We will store information about your mouse interaction (e.g. what you clicked) when answering the survey questions.</li>
<li>We may allow other researchers to use the interaction data that we collect.
Researchers from other universities can request to use the data.</li>
</ul>
</p>
<p>
We encourage you to ask questions. If you have any questions about the research study itself, please contact: Alvitta Ottley (alvitta@wustl.edu). If you have questions, concerns, or complaints about your rights as a research participant, please contact the Human Research Protection Office at 660 South Euclid Avenue, Campus Box 8089, St. Louis, MO 63110, 1-(800)-438-0445 or email hrpo@wusm.wustl.edu. General information about being a research participant can be found on the Human Research Protection Office web site, http://hrpo.wustl.edu/. To offer input about your experiences as a research participant or to speak to someone other than the research staff, call the Human Research Protection Office at the number above.
Thank you very much for your consideration of this research study.
</p> */}
<div className={'text-center'}><Button onClick={this.go_to_tutorial.bind(this)} className={'btn-sm'} variant={"success"}> <div className={'text-center'}><Button onClick={this.go_to_tutorial.bind(this)} className={'btn-sm'} variant={"success"}>
I agree to participate. Я погоджуюсь взяти участь в дослідженні.
</Button></div> </Button></div>
</div> </div>

13
ReactTool/frontend/src/pages/thank_you.js
View File

@@ -6,7 +6,6 @@ import { record_ques } from './visualization_quiz';
class ThankYou extends Component { class ThankYou extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
} }
@@ -24,8 +23,8 @@ class ThankYou extends Component {
<table style={{ borderCollapse: 'collapse', margin: 'auto' }}> <table style={{ borderCollapse: 'collapse', margin: 'auto' }}>
<thead> <thead>
<tr> <tr>
<th style={{ border: '1px solid black', padding: '5px' }}>Question</th> <th style={{ border: '1px solid black', padding: '5px' }}>Запитання</th>
<th style={{ border: '1px solid black', padding: '5px' }}>Result</th> <th style={{ border: '1px solid black', padding: '5px' }}>Результат</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -33,7 +32,7 @@ class ThankYou extends Component {
<tr key={question}> <tr key={question}>
<td style={{ border: '1px solid black', padding: '5px' }}>{question}</td> <td style={{ border: '1px solid black', padding: '5px' }}>{question}</td>
<td style={{ border: '1px solid black', padding: '5px' }}> <td style={{ border: '1px solid black', padding: '5px' }}>
{answer === 'Correct' ? <span>&#10004;</span> : answer === 'Wrong' ? <span>&#10060;</span> : answer} {answer === 'Вірно' ? <span>&#10004;</span> : answer === 'Невірно' ? <span>&#10060;</span> : answer}
</td> </td>
</tr> </tr>
))} ))}
@@ -48,17 +47,17 @@ class ThankYou extends Component {
console.log("The values of the dictionary is: " + Object.values(record_ques)) console.log("The values of the dictionary is: " + Object.values(record_ques))
if (this.props.location.state == null) { if (this.props.location.state == null) {
return (<p>Unknown session. Please start from the <a href={'#/'}> consent page</a></p>) return (<p>Невизначена сесія. Будь ласка поверніться на <a href={'/'}> сторінку згоди</a></p>)
} }
if (this.state == null) { if (this.state == null) {
return (<p>Loading...</p>) return (<p>Завантаження...</p>)
} }
return ( return (
<Row className={'justify-content-center no-margin-row'}> <Row className={'justify-content-center no-margin-row'}>
<Col lg={6} className={'text-box text-justify'}> <Col lg={6} className={'text-box text-justify'}>
<h3 style={{ marginBottom: '20px' }}>You scored {score_2} out of 12. Thank you for participating in our study. Your responses have been recorded.</h3> <h3 style={{ marginBottom: '20px' }}>Ваш результат: {score_2} із 12. Дякую за те що взяли участь в дослідженні. Ваші відповіді були збережені.</h3>
{this.renderTable()} {this.renderTable()}
</Col> </Col>
</Row> </Row>

20
ReactTool/frontend/src/pages/tutorial.js
View File

@@ -54,7 +54,7 @@ class Tutorial extends Component {
render() { render() {
if (this.props.location.state == null) { if (this.props.location.state == null) {
return (<p>Unknown session. Please start from the <a href={'#/'}> consent page</a></p>) return (<p>Невизначена сесія. Будь ласка поверніться на <a href={'/'}> сторінку згоди</a></p>)
} }
return ( return (
@@ -62,20 +62,24 @@ class Tutorial extends Component {
<Row className={'justify-content-center tutorial-body'}> <Row className={'justify-content-center tutorial-body'}>
<Col lg={6} className={'text-box text-justify'}> <Col lg={6} className={'text-box text-justify'}>
<p className='head_1'>Intructions</p> <p className='head_1'>Інструкції</p>
<ul> <ul>
<li className='int_1'>You will be given 12 multiple-choice questions</li> <li className='int_1'>
<li className='int_1'>Answer to the best of your ability. If you are unsure,you may skip the questions instead of guessing.</li> Вам буде запропоновано 12 питань з вибором однієї правильної відповіді.</li>
{/* <li className='int_1'>Please do not take this test if you are color blind. Here is a link to a separate test: <a href='https://colormax.org/color-blind-test/' target="_blank">https://colormax.org/color-blind-test/</a></li> */} <li className='int_1'>
{/* <li>We will store information about your mouse interaction (e.g. what you clicked) when answering the survey questions.</li> */} Дайте на них відповідь, якщо ви впевнені в своїй відповіді. Якщо ви не впевнені, ви можете пропустити питання, а не вгадувати.
</li>
</ul> </ul>
<p className='head_2'><b>Important: You will have 25 seconds to answer each question.</b> Answer to the best of your ability. You may <b>skip the questions instead of guessing</b> if you are unsure.</p> <p className='head_2'>
<b>Важливо: на відповідь до кожного питання ви маєте 25 секунд.</b>
Відповідайте на кожне питання якнайкраще. Якщо ви не впевнені, ви можете <b>пропустити питання, а не вгадувати</b>.
</p>
<div className={'text-center'}> <div className={'text-center'}>
<Button onClick={this.on_experiment_click.bind(this)} <Button onClick={this.on_experiment_click.bind(this)}
className={'btn-sm'} variant={"success"}> className={'btn-sm'} variant={"success"}>
Start the experiment. Розпочати
</Button> </Button>
</div> </div>

158
ReactTool/frontend/src/pages/visualization_quiz.js
View File

@@ -34,18 +34,94 @@ import img12 from '../components/data/VLAT-Pics/LineChart.png'
let minivis = [ let minivis = [
{ 'vis': BarChartMini, 'type': 'Bar Chart', 'question': 'What is the average internet speed in Japan?', 'options': ["42.30 Mbps", "40.51 Mbps", "35.25 Mbps", "16.16 Mbps", "Skip"], 'correct_answer': 1, 'cimage': img9 }, {
{ 'vis': AreaChartMini, 'type': 'Area Chart', 'question': 'What was the average price of pount of coffee beans in October 2019?', 'options': ["$0.71", "$0.90", "$0.80", "$0.63", "Skip"], 'correct_answer': 0, 'cimage': img10 }, 'vis': LineChartMini,
{ 'vis': BubbleChartMini, 'type': 'Bubble Chart', 'question': 'Which city\'s metro system has the largest number of stations?', 'options': ['Beijing', 'Shanghai', 'London', 'Seoul', "Skip"], 'correct_answer': 1, 'cimage': img3 }, 'type': 'Лінійна діаграма',
{ 'vis': ChoroplethMini, 'type': 'Choropleth', 'question': 'In 2020, the unemployment rate for Washington (WA) was higher than that of Wisconsin (WI).', 'options': ['True', 'False', "Skip"], 'correct_answer': 0, 'cimage': img8 }, 'question': 'Яким був ціновий діапазон бареля нафти у 2020 році?',
{ 'vis': HistogramMini, 'type': 'Histogram', 'question': 'What distance have customers traveled in the taxi the most?', 'options': ["60 - 70 Km", "30 - 40 Km", "20 - 30 Km", "50 - 60 Km", "Skip"], 'correct_answer': 1, 'cimage': img6 }, 'options': ["$16.55 - $57.52", "$19.52 - $59.00", "$23.43 - $60.72", "$21.82 - $87.52", "Пропустити"],
{ 'vis': LineChartMini, 'type': 'Line Chart', 'question': 'What was the price of a barrel of oil in February 2020?', 'options': ["$50.54", "$47.02", "$42.34", "$42.34", "Skip"], 'correct_answer': 0, 'cimage': img12 }, 'correct_answer': 0,
{ 'vis': TreeMapMini, 'type': 'Treemap', 'question': 'eBay is nested in the Software category.', 'options': ['True', 'False', 'Skip'], 'correct_answer': 1, 'cimage': img4 }, 'cimage': img12
{ 'vis': ScatterPlotMini, 'type': 'Scatterplot', 'question': 'There is a negative linear relationship between the height and the weight of the 85 males.', 'options': ['True', 'False', 'Skip'], 'correct_answer': 1, 'cimage': img1 }, },
{ 'vis': StackedBarChartMini, 'type': '100% Stacked Bar', 'question': 'Which country has the lowest proportion of Gold medals?', 'options': ["Great Britain", "U.S.A.", "Japan", "Australia", 'Skip'], 'correct_answer': 0, 'cimage': img5 }, {
{ 'vis': StackedAreaPlotMini, 'type': 'Stacked Area', 'question': 'What was the ratio of girls named \'Isla\' to girls named \'Amelia\' in 2012 in the UK?', 'options': ["1 to 1", "1 to 2", "1 to 3", "1 to 4", "Skip"], 'correct_answer': 1, 'cimage': img7 }, 'vis': BarChartMini,
{ 'vis': StackedBarChart2Mini, 'type': 'Stacked Bar', 'question': 'What is the cost of peanuts in Seoul?', 'options': ["$6.1", "$5.2", "$7.5", "$4.5", "Skip"], 'correct_answer': 0, 'cimage': img2 }, 'type': 'Стовпчикова діаграма (Bar Chart)',
{ 'vis': PieChartMini, 'type': 'Pie Chart', 'question': 'What is the approximate global smartphone market share of Samsung?', 'options': ["17.6%", "25.3%", "10.9%", "35.2%", 'Skip'], 'correct_answer': 0, 'cimage': img11 } 'question': 'Який діапазон середньої швидкості інтернету в Азії?',
'options': ["5.50Mbps - 30.60Mbps", "7.00Mbps - 29.40Mbps", "6.40Mbps - 27.38Mbps", "5.50Mbps - 28.60Mbps", "Пропустити"],
'correct_answer': 3,
'cimage': img9
},
{
'vis': StackedBarChart2Mini,
'type': 'Накопичувальна стовпчикова діаграма (Stacked Bar)',
'question': 'Яка ціна арахісу в Лас Веґасі?',
'options': ["$9.0", "$6.1", "$10.3", "$4.3", "Пропустити"],
'correct_answer': 1,
'cimage': img2
},
{
'vis': PieChartMini,
'type': 'Кругова діаграма (Pie Chart)',
'question': 'Яку приблизно частку ринку смартфонів займає Samsung?',
'options': ["20%", "25%", "30%", "15%", "Пропустити"],
'correct_answer': 1,
'cimage': img11
},
{
'vis': HistogramMini,
'type': 'Гістограма (Histogram)',
'question': 'Скільки людей оцінили таксі рейтингом між 4.2 та 4.4?',
'options': ["270", "190", "300", "290", "Пропустити"],
'correct_answer': 1,
'cimage': img6
},
{
'vis': ScatterPlotMini,
'type': 'Точкова діаграма (Scatterplot)',
'question': 'Існує негативна лінійна залежність між ростом і вагою 85 чоловіків.',
'options': ['True', 'False', "Пропустити"],
'correct_answer': 1,
'cimage': img1
},
{
'vis': AreaChartMini,
'type': 'Площинна діаграма (Area Chart)',
'question': 'Якою була середня ціна фунту кавових бобів в вересні 2013?',
'options': ["$5.15", "$6.2", "$4.8", "$4.3", "Пропустити"],
'correct_answer': 0,
'cimage': img10
},
{
'vis': StackedAreaPlotMini,
'type': 'Накопичувальна площинна діаграма (Stacked Area)',
'question': 'Яку кількість дівчаток назвали «Олівія» у 2010 році у Великобританії?',
'options': ["2000", "2500", "1700", "2400", "Пропустити"],
'correct_answer': 2,
'cimage': img7
},
{
'vis': BubbleChartMini,
'type': 'Бульбашкова діаграма (Bubble Chart)',
'question': 'Яка загальна протяжність системи метро в Пекіні?',
'options': ["525 км", "495 км", "305 км", "475 км", "Пропустити"],
'correct_answer': 0,
'cimage': img3
},
{
'vis': ChoroplethMini,
'type': 'Хороплетна мапа (Choropleth)',
'question': 'У 2015 році рівень безробіття у Вашингтоні (WA) був вищим, ніж у Вісконсині (WI).',
'options': ['Вірно', 'Невірно', "Пропустити"],
'correct_answer': 0,
'cimage': img8
},
{
'vis': TreeMapMini,
'type': 'Деревоподібна діаграма (Treemap)',
'question': 'Для якого сайту кількість унікальних відвідувачів була найбільшою в 2010 році?',
'options': ["Amazon", "Chase", "PayPal", "Citibank", "Пропустити"],
'correct_answer': 3,
'cimage': img4
}
]; ];
var record_ques = {} var record_ques = {}
@@ -143,13 +219,13 @@ class VisQuiz extends Component {
score_2 = this.state.mini_score score_2 = this.state.mini_score
if (response === minivis[this.state.current_mini_index]['options'][truth]) { if (response === minivis[this.state.current_mini_index]['options'][truth]) {
record_ques[type] = 'Correct' record_ques[type] = '✅ Вірно'
} }
else if (response === 'Skip') { else if (response === 'Skip') {
record_ques[type] = 'Skip' record_ques[type] = '⏩ Пропущено'
} }
else { else {
record_ques[type] = 'Wrong' record_ques[type] = '❌ Невірно'
} }
console.log("The dictionary is: ", record_ques) console.log("The dictionary is: ", record_ques)
} }
@@ -212,7 +288,7 @@ class VisQuiz extends Component {
this.props.history.push(pageType) this.props.history.push(pageType)
} }
timeout() { timeout() {
alert("Time is up! Please select 'Ok' to proceed to the next question.") alert('Чакс вийшов! Натисніть "ОК" щоб перейти до наступного запитання.')
this.setState({ this.setState({
current_visualization_index: this.state.current_visualization_index + 1, current_visualization_index: this.state.current_visualization_index + 1,
}) })
@@ -221,7 +297,7 @@ class VisQuiz extends Component {
return Math.random(); return Math.random();
} }
minitimeout() { minitimeout() {
alert("Time is up! Please select 'Ok' to proceed to the next question.") alert('Чакс вийшов! Натисніть "ОК" щоб перейти до наступного запитання.')
this.setState({ this.setState({
current_mini_index: this.state.current_mini_index + 1, current_mini_index: this.state.current_mini_index + 1,
}) })
@@ -236,7 +312,7 @@ class VisQuiz extends Component {
if (this.props.location.state == undefined) { if (this.props.location.state == undefined) {
window.location.href = "/"; window.location.href = "/";
return (<p>Unknown session. Please start from the <a href={'/'}> consent page</a></p>) return (<p>Невизначена сесія. Будь ласка поверніться на <a href={'/'}> сторінку згоди</a></p>)
} }
let ages = [] let ages = []
for (var i = 18; i < 100; i++) { for (var i = 18; i < 100; i++) {
@@ -265,7 +341,7 @@ class VisQuiz extends Component {
<Col lg={6} className={'quiz-column'}> <Col lg={6} className={'quiz-column'}>
<div className='timeStamp'> <div className='timeStamp'>
<Countdown date={Date.now() + 25000} renderer={({ minutes, seconds, completed }) => { <Countdown date={Date.now() + 25000} renderer={({ minutes, seconds, completed }) => {
return <span>Time Remaining: {minutes}:{seconds}</span>; return <span>Залишилось часу: {minutes}:{seconds}</span>;
}} autoStart={true} key={Date.now()} onComplete={() => this.minitimeout()} /> }} autoStart={true} key={Date.now()} onComplete={() => this.minitimeout()} />
{/* <CountDownTimer hoursMinSecs={hoursMinSecs} /> */} {/* <CountDownTimer hoursMinSecs={hoursMinSecs} /> */}
</div> </div>
@@ -295,7 +371,7 @@ class VisQuiz extends Component {
<Form.Group className={'question'}> <Form.Group className={'question'}>
<Form.Label>Please select your age.</Form.Label> <Form.Label>Будь ласка вкажіть свій вік.</Form.Label>
<Form.Select as="select" id={'age'} onChange={this.handleDemographicChange.bind(this)}> <Form.Select as="select" id={'age'} onChange={this.handleDemographicChange.bind(this)}>
<option value={null} selected={true} disabled={true}></option> <option value={null} selected={true} disabled={true}></option>
{ages.map((d, i) => ( {ages.map((d, i) => (
@@ -306,54 +382,54 @@ class VisQuiz extends Component {
<hr /> <hr />
<Form.Group className={'question'}> <Form.Group className={'question'}>
<Form.Label>Please select your gender.</Form.Label> <Form.Label>Будь ласка вкажіть ваш ґендер.</Form.Label>
<Form.Select as="select" id={'sex'} onChange={this.handleDemographicChange.bind(this)}> <Form.Select as="select" id={'sex'} onChange={this.handleDemographicChange.bind(this)}>
<option value={null} selected={true} disabled={true}></option> <option value={null} selected={true} disabled={true}></option>
<option key={'male'} value={'male'}>Male</option> <option key={'male'} value={'male'}>Чоловік</option>
<option key={'female'} value={'female'}>Female</option> <option key={'female'} value={'female'}>Жінка</option>
<option key={'other'} value={'other'}>Other</option> <option key={'other'} value={'other'}>Небінарна персона</option>
<option key={'withdraw'} value={'withdraw'}>I do not wish to disclose.</option> <option key={'withdraw'} value={'withdraw'}>Не хочу розголошувати цю інформацію</option>
</Form.Select> </Form.Select>
</Form.Group> </Form.Group>
<hr /> <hr />
<Form.Group className={'question'}> <Form.Group className={'question'}>
<Form.Label>Please select your highest level of completed education.</Form.Label> <Form.Label>Будь ласка, оберіть ваш найвищий рівень завершеної освіти.</Form.Label>
<Form.Select as="select" id={'education'} onChange={this.handleDemographicChange.bind(this)}> <Form.Select as="select" id={'education'} onChange={this.handleDemographicChange.bind(this)}>
<option value={null} selected={true} disabled={true}></option> <option value={null} selected={true} disabled={true}></option>
<option value={'highschool'}>High School Diploma / GED</option> <option value={'highschool'}>Повна загальна середня освіта</option>
<option value={'associate'}>Associate Degree</option> <option value={'associate'}>Фахова передвища освіта</option>
<option value={'bachelors'}>Bachelors Degree</option> <option value={'bachelors'}>Бакалаврський ступінь</option>
<option value={'masters'}>Masters Degree</option> <option value={'masters'}>Магістерський ступінь</option>
<option value={'doctorate'}>Doctorate Degree</option> <option value={'doctorate'}>Докторський ступінь</option>
</Form.Select> </Form.Select>
</Form.Group> </Form.Group>
<hr /> <hr />
<Form.Group className={'question'}> <Form.Group className={'question'}>
<Form.Label>Are you color-blind?</Form.Label> <Form.Label>Чи маєте ви колірну сліпоту (дальтонізм)?</Form.Label>
<Form.Select as="select" id={'color-blind'} onChange={this.handleDemographicChange.bind(this)}> <Form.Select as="select" id={'color-blind'} onChange={this.handleDemographicChange.bind(this)}>
<option value={null} selected={true} disabled={true}></option> <option value={null} selected={true} disabled={true}></option>
<option value={'yes'}>Yes</option> <option value={'yes'}>Так</option>
<option value={'no'}>No</option> <option value={'no'}>Ні</option>
<option value={'maybe'}>I do not wish to disclose.</option> <option value={'maybe'}>Не хочу розголошувати цю інформацію</option>
</Form.Select> </Form.Select>
</Form.Group> </Form.Group>
<hr /> <hr />
<Form.Group className={'question'}> <Form.Group className={'question'}>
<Form.Label>Please select your familiarity with visualization.</Form.Label> <Form.Label>Будь ласка опишіть ваш досвід з візуалізацією даних.</Form.Label>
<Form.Select as="select" id={'familiarity'} onChange={this.handleDemographicChange.bind(this)}> <Form.Select as="select" id={'familiarity'} onChange={this.handleDemographicChange.bind(this)}>
<option value={null} selected={true} disabled={true}></option> <option value={null} selected={true} disabled={true}></option>
<option value={'not_familiar'}>I have never created a visualization.</option> <option value={'not_familiar'}>Я ніколи не працював професійно з візуалізацією даних</option>
<option value={'somewhat'}>I am somewhat familiar.</option> <option value={'somewhat'}>Я дещо знайомий з візуалізацією даних</option>
<option value={'very_familiar'}>I have created visualization systems before. </option> <option value={'very_familiar'}>Я створював візуалізації даних самостійно</option>
</Form.Select> </Form.Select>
</Form.Group> </Form.Group>
<hr /> <hr />
<Form.Group> <Form.Group>
<Form.Label>Please include any additional comments below. (optional)</Form.Label> <Form.Label>(опціонально) Будь ласка, залиште коментар якщо бажаєте.</Form.Label>
<Form.Control as="textarea" id={'comments'} rows={3} onChange={this.handleTextChange.bind(this)}> <Form.Control as="textarea" id={'comments'} rows={3} onChange={this.handleTextChange.bind(this)}>
</Form.Control> </Form.Control>
</Form.Group> </Form.Group>
@@ -365,7 +441,7 @@ class VisQuiz extends Component {
onClick={this.on_survey_click.bind(this)} onClick={this.on_survey_click.bind(this)}
disabled={(this.state.form_incomplete || this.state.demographics_incomplete)} disabled={(this.state.form_incomplete || this.state.demographics_incomplete)}
id={'survey_submit-btn'}> id={'survey_submit-btn'}>
Submit Responses Відправити відповіді
</Button></div> </Button></div>
<p className={'text-box'}></p> <p className={'text-box'}></p>