Mini-VLAT-ua/ReactTool/frontend/src/pages/introduction.js

import React, { Component, useState, useEffect } from 'react';
import { Col, Row, Navbar, Button } from 'react-bootstrap';
import { PDFViewer } from '@react-pdf/renderer';
import { Document, Page } from 'react-pdf';

class Intro extends Component {

  constructor(props) {
    super(props)
  }

  go_to_tutorial() {
    var pageType = {
      pathname: '/tutorial',
      state: {
        data: {
        }
      }
    }
    this.props.history.push(pageType)

  }



  render() {
    var user = navigator.userAgent
    var browser_supported = true //user.includes('Chrome')

    console.log(user)
    var mobile_device = /Opera Mini/i.test(navigator.userAgent)
    if (mobile_device || !browser_supported) {
      return (<>
        <Row className={'justify-content-center'}>
          <Col lg={6} className={'text-box text-justify'}>

            <p>Sorry, your browser is not supported.</p>
            <p>Please download <a href={'https://www.mozilla.org/en-US/firefox/new/'}>Firefox</a> (version 80 or newer) or <a href={'https://www.google.com/chrome/'}>Chrome</a> (version 85 or newer) on your computer and try again.</p>

          </Col>

        </Row>
      </>
      );
    }

    return (
      <>
        <Row className={'justify-content-center no-margin-row'}>
          <div className='heading-term'>Згода на участь в дослідженні з візуалізації даних</div>
          <div className={'terms-container'}>
            <div className='terms'>
              <p>
                Запрошуємо взяти участь в дослідженні, що проводять викладачі та студенти Київської школи економіки. Ви запрошені взяти участь у цьому дослідженні, оскільки є дорослою людиною, яка володіє українською мовою. Мета дослідження полягає в адаптації інструменту, який вимірює, наскільки добре люди можуть зчитувати, розуміти та використовувати візуалізацію даних для вирішення проблем.
              </p>
              <p>
                Якщо ви погоджуєтеся взяти участь, запропонуємо вам дати відповіді щодо змісту декількох візуалізацій даних. Для кожного питання ви побачите візуалізацію даних та запитання, на яке потрібно дати відповідь. Виберіть відповідь на питання, яку вважаєте НАЙТОЧНІШОЮ. Якщо ви не впевнені, виберіть «Пропустити» замість того, щоб вгадувати. Ви також можете пропустити будь-які питання, на які ви вважаєте за краще не відповідати. У кінці ми попросимо вас заповнити короткий демографічний опитувальник.
              </p>
              <p>
                Дані, які ми зберемо протягом цього опитування, будуть використані в поточному та подальших дослідженнях грамотності в сфері візуалізації даних.
              </p>
              {/* <p>
                Ці дослідження можуть надати додаткову інформацію, яка буде корисною для розробки кращих інструментів візуальної комунікації. Скоріш за все знахідки з цих досліджень не будуть для вас прямої користі. Немає планів надавати вам фінансову компенсацію, якщо це станеться. Дозволивши нам використовувати ваші дані, ви відмовляєтеся від будь-яких прав власності, які ви можете мати на ці дані.
              </p> */}
              <p>
                Зібрані дані будуть передаті іншим дослідникам, які проводитимуть дослідження в цій або суміжних сферах. Також ми можемо опублікувати зібрані дані в репозиторіях даних для широкого доступу до наукової спільноти. Якщо ваші індивідуальні дані будуть розміщені в одному з цих репозиторіїв, лише кваліфіковані дослідники, які отримали попередню згоду від осіб, які контролюють використання даних, зможуть переглядати вашу інформацію.
              </p>
              <p>
                Ваші дані будуть збережені без вашого імені чи будь-якої іншої інформації, яка дозволила б нам ідентифікувати вас персонально. Тому вони будуть доступні безстроково для використання в майбутніх дослідженнях без вашої додаткової згоди та не можуть бути видалені.
              </p>
              <p>Участь в цьому дослідженні не містить для вас жодних відомих потенційних ризиків.</p>
              <p>
                Якщо ви маєте будь-які питання щодо змісту та деталей дослідження, будь-ласка напишіть Олегу Омельченко (o_omelchenko@kse.org.ua).
              </p>
              <p>Дякуємо за зацікавленість дослідженням!</p>
            </div>

            <div className={'text-center'}><Button onClick={this.go_to_tutorial.bind(this)} className={'btn-sm'} variant={"success"}>
              Я погоджуюсь взяти участь в дослідженні.
            </Button></div>
          </div>

        </Row>
      </>
    );
  }
}

export default Intro;