let currentQuizItemId = this.state.currentQuizItemId;
let quizStatus = {
'last': false,
'first': false
};
if (currentQuizItemId === 0) {
quizStatus.first = true;
}
else if (currentQuizItemId >= n - 1) {
quizStatus.last = true;
}
let quizItem = this.props.quiz[currentQuizItemId];
const isEnd = this.state.isEnd;
return (
<div className={classes} ref={_this => this.self = _this}>
{isEnd &&
<QuizResult checkedAnswers={this.state.checkedAnswers} correctAnswers={this.props.quiz.map(e => e.correct)} restartQuiz={this.restartQuiz.bind(this)}
></QuizResult>
}
{!isEnd &&
<QuizContext.Provider value={{
'quizItem': quizItem,
'checkedAnswer': this.state.checkedAnswers[currentQuizItemId]
}}>
<QuizItem onClick={this.updateAnswers.bind(this)}></QuizItem>
</QuizContext.Provider>
}
{!isEnd &&
<QuizNav
changeToNext={this.changeQuizItem.bind(this, 'r')}
changeToPrev={this.changeQuizItem.bind(this, 'l')}
endQuiz={this.endQuiz.bind(this)}
quizStatus={quizStatus}
></QuizNav>
}
</div>
);
}
}
export default Quiz;
На листинге 2.2 представлен код модуля «Практика»
Листинг 2.2 - Код модуля «Практика»
import React from 'react';
import PracticeConvert from './PracticeConvert';
import PracticeCodes from './PracticeCodes';
import PracticeFunc from './PracticeFunc';
import PropTypes from 'prop-types';
const Practice = [
{
text: '1. Перевод чисел из одной системы в другую',
// id: 0,
active: false,
contentComponent: PracticeConvert,
contentOptions: {
// key: 'p0',
// externalId: 0,
// onComplete: handlePracticeComplete
}
},
{
text: '2. Выполнение арифметических операций в обратном и дополнительных кодах',
// id: 1,
active: false,
contentComponent: PracticeCodes,
contentOptions: {
// key: 'p1',
// externalId: 1,
// onComplete: handlePracticeComplete
}
},
{
text: '3. Преобразование логических выражений',
// id: 2,
active: false,
contentComponent: PracticeFunc,
contentOptions: {
// key: 'p2',
// externalId: 2,
// onComplete: handlePracticeComplete
}
}
];
export default Practice;
На листинге 2.3 представлен код модуля «Теория»
Листинг 2.3 - Листинг модуля «Теория»
import React from 'react';
class Theory extends React.Component {
constructor(props) {
super(props);
this.state = {
externalId: this.props.externalId
};
}
componentDidMount() {
if (this.props.onComplete instanceof Function) {
this.text.addEventListener('t-completed', this.props.onComplete);
}
}
componentWillUnmount() {
// console.log(this.text);
this.text.dispatchEvent(new CustomEvent('t-completed', {
bubbles: true,
detail: {
cached: this.props.cached,
html:this.props.cached === true ? '' : this.text.innerHTML,
id: this.state.externalId
}
}));
}
render() {
let classes = `theory ${this.props.classes ? this.props.classes : ''}`;
return (
<div className={classes}>
{/*this.state.loaded &&*/
<div className="theory__text" dangerouslySetInnerHTML={{ __html: this.props.html }} ref={_text => this.text = _text}>
</div>
}
{this.props.cached !== true &&
(e => {
if (window.MathJax) {
setTimeout(() => {
window.MathJax.typeset();
}, 0);
}
})()
}
</div>
);
}
}
export default Theory;
На листинге 2.4 представлен листинг модуля «Профиль»
Листинг 2.4 - Листинг модуля «Профиль»
import React from 'react';
import Status from '../Status/Status';
import { downloadJson, sha256, deleteProps, toTeX } from '../helper-functions';
class Profile extends React.Component {
constructor(props) {
super(props);
this.state = {
globalStorage: this.props.globalStorage
}
}
exportData() {
const user = this.state.globalStorage.user;
// const storageCopy = Object.assign({}, this.state.globalStorage);
const storageCopy = JSON.parse(JSON.stringify(this.state.globalStorage));
// delete storageCopy.hash;
deleteProps(storageCopy, ['hash', 'detail']);
const str = JSON.stringify(storageCopy);
sha256(str)
.then(hash => {
this.state.globalStorage.hash = hash;
downloadJson(this.state.globalStorage, `${user.name}-${user.group}`);
})
}
showQuizStats() {
let html = this.state.globalStorage.quizes.reduce((acc, q) => {
if (q.completed !== true) {
return acc + `
<div>
<h3>${q.detail.title}</h3>
<p>Этот тест еще не пройден</p>
</div>
`;
}
return acc + `
<div>
<h3>${q.detail.title}</h3>
<p>Верно отвечено на ${q.detail.correct} из ${q.detail.total} вопросов</p>
</div>
`;
}, '');
this.statsElement.innerHTML = html;
}
showPracticeStats() {
let html = this.state.globalStorage.practice.reduce((acc, p, i) => {
if (p.completed !== true) {
return acc + `
<div>
<h3>${p.detail.title}</h3>
<p>Это задание еще не пройдено</p>
</div>
`;
}
return acc + `
<div>
<h3>${p.detail.title}</h3>
<p>Практика пройдена <span class="more" data-id=${i} data-for="p">подробнее</span></p>
</div>
`;
}, '');
this.statsElement.innerHTML = html;
}
/**
*
* @param {React.SyntheticEvent} e
*/
handleStatsClick(e) {
e.persist();
// console.log(e);
const dataset = e.target.dataset;
if (dataset.id) {
switch (dataset.for) {
case 'p':
const practice = this.state.globalStorage.practice[dataset.id]
// console.log(this.state.globalStorage.practice[dataset.id].detail);
// console.log(practice)
switch (practice.detail.type) {
case 'func':
this.metaElement.innerHTML = `
<div style="width: fit-content; margin: auto;">
<p>Функция: ${practice.detail.boolFunc.reduce((acc, cur) => `${acc} ${cur}`, '')}</p> ${practice.detail.answers.reduce((acc, cur) => `${acc}<div style="display: grid; align-items: center; grid-template-columns: 0fr 1fr;"><span>${cur.type}:</span> <span>${window.MathJax.tex2chtml(toTeX(cur.answer)).outerHTML}</span></div>`, '')}
</div>`;
if (window.MathJax) {
window.MathJax.typeset();
} this.metaElement.classList.remove('profile__meta--hidden');
break;
}
break;
}
}
}
/**
*
* @param {React.MouseEvent} e
*/
handleMetaClick(e) {
e.persist();
// console.log(e.screenX, e.screenY, );
// console.log();
let mR = this.metaElement.getBoundingClientRect(),
wW = window.innerWidth,
wH = window.innerHeight,
mX = e.pageX,
mY = e.pageY;
console.log(e.screenX, e.screenY, mR.top, e);
if (mX >= mR.left + mR.width - 30 && mX <= mR.left + mR.width
&& mY >= mR.top && mY <= mR.top + 30) { this.metaElement.classList.toggle('profile__meta--hidden', true);
}
}
render() {
let classes = `profile ${this.props.classes ? this.props.classes : ''}`;
const quizStats = this.state.globalStorage.quizes;
const practiceStats = this.state.globalStorage.practice;
// console.log(quizStats);
return (
<div className={classes}>
{/* <div className="profile__item">
Теория
</div> */}
<div className="profile__item" onClick={this.showPracticeStats.bind(this)}>
Практики
<Status classes="profile__status" items={practiceStats.map(p => { return { done: p.completed } })}></Status>
</div>
<div className="profile__item" onClick={this.showQuizStats.bind(this)}>
Тесты
<Status classes="profile__status" items={quizStats.map(q => { return { done: q.completed } })}></Status>
</div>
<div className="profile__item" onClick={this.exportData.bind(this)}>
Выгрузить данные профиля
</div>
<div className="profile__item" onClick={this.props.onLogout}>
Выйти
</div>
<div className="profile__meta profile__meta--hidden profile__meta--stats" onClick={this.handleMetaClick.bind(this)} ref={element => this.metaElement = element}> </div>
<div className="profile__stats" ref={element => this.statsElement = element} onClick={this.handleStatsClick.bind(this)}> </div>
</div>
);
}
}
export default Profile;
3. Безопасность жизнедеятельности
3.1 Требования к помещениям для работы с ПЭВМ
3.1.1 Эксплуатация ПЭВМ в помещениях без естественного освещения допускается только при наличии расчетов, обосновывающих соответствие нормам естественного освещения и безопасность их деятельности для здоровья работающих
Естественное и искусственное освещение должно соответствовать требованиям действующей нормативной документации. Окна в помещениях, где эксплуатируется вычислительная техника, преимущественно должны быть ориентированы на север и северо-восток.
Оконные проемы должны быть оборудованы регулируемыми устройствами типа: жалюзи, занавесей, внешних козырьков и др.
3.1.2 Не допускается размещение мест пользователей ПЭВМ во всех образовательных и культурно-развлекательных учреждениях для детей и подростков в цокольных и подвальных помещениях
Площадь на одно рабочее место пользователей ПЭВМ с ВДТ на базе электронно-лучевой трубки (ЭЛТ) должна составлять не менее 6 м2, в помещениях культурно-развлекательных учреждений и с ВДТ на базе плоских дискретных экранов (жидкокристаллические, плазменные) - 4,5 м2.
При использовании ПВЭМ с ВДТ на базе ЭЛТ (без вспомогательных устройств - принтер, сканер и др.), отвечающих требованиям международных стандартов безопасности компьютеров, с продолжительностью работы менее 4 ч в день допускается минимальная площадь 4,5 м2 на одно рабочее место пользователя (взрослого и учащегося высшего профессионального образования).
3.1.3 Для внутренней отделки интерьера помещений, где расположены ПЭВМ, должны использоваться диффузно отражающие материалы с коэффициентом отражения для потолка - 0,7-0,8; для стен - 0,5-0,6; для пола - 0,3-0,5
Полимерные материалы используются для внутренней отделки интерьера помещений с ПЭВМ при наличии санитарно-эпидемиологического заключения.
3.1.4 Помещения, где размещаются рабочие места с ПЭВМ, должны быть оборудованы защитным заземлением (занулением) в соответствии с техническими требованиями по эксплуатации
Не следует размещать рабочие места с ПЭВМ вблизи силовых кабелей и вводов, высоковольтных трансформаторов, технологического оборудования, создающего помехи в работе ПЭВМ.[6]
3.2 Выявление опасных и вредных факторов при работе
Рабочее место, оборудованное средствами вычислительной техники, характеризуется наличием вредных и опасных производственных факторов:
повышенное значение напряжения электрического тока;
повышенное тепловыделение;
избыточный шум;
ультрафиолетовое, инфракрасное и ионизирующее излучения;
электромагнитное поле;
статическое электричество.
Все устройства ПЭВМ должны быть надежно установлены на столе. Над столом не должно быть никаких посторонних предметов. Категорически запрещается укладывать на ПЭВМ какие-либо предметы или бумагу. Перед началом работы при отключенном электропитании необходимо убедиться:
- в наличии надежного заземления устройства;
- в исправности соединительных кабелей;
- все устройства должны быть в закрытых корпусах.
Согласно основным требованиям техники безопасности запрещается:
- работать с разъемами кабелей, находящихся под напряжением;
- оставлять без надзора включенную ПЭВМ;
- снимать покрытия, закрывающие токоведущие части оборудования;
- пользоваться неисправной ПЭВМ.
Рекомендации охраны труда в аварийных ситуациях:
- сотрудник должен соблюдать меры электрической и пожарной безопасности;
- сотрудник должен знать местонахождение аптечки первой медицинской помощи и уметь правильно ее использовать при несчастных случаях;
- сотрудник должен, уметь оказать первую доврачебную помощь;
- в случаях обнаружения обрывов проводов питания, неисправности электрооборудования, появления запаха гари необходимо немедленно отключить питание и сообщить об аварийной ситуации;
- при обнаружении человека, попавшего под напряжение, немедленно освободить его от действия тока путем отключения электропитания и, до прибытия врача, оказать потерпевшему первую медицинскую помощь.
- о возникшем возгорании необходимо немедленно сообщить руководителю и в соответствующее подразделение пожарной охраны и приступить к тушению огня первичными средствами пожаротушения.
- в случае отключения электропитания необходимо прекратить работу и доложить руководителю.
Рекомендации охраны труда по окончании работы:
По окончании работы необходимо соблюдать следующую последовательность выключения персонального компьютера:
- закрыть все активные задачи;
- убедиться, что в дисководах нет носителей информации;
- выключить питание системного блока;
- выключить монитор;
- выключить питание всех периферийных устройств;
- выключить источник бесперебойного питания.
По окончании работы осмотреть и привести в порядок рабочее место.
Защита от электромагнитного поля и рентгеновского излучения. Электромагнитное излучение наносит ущерб здоровью в форме:
- воздействие на эндокринную систему;
- образование злокачественных опухолей.
С целью контроля проводить периодические замеры электромагнитного поля на рабочем месте оператора, замеры ионного воздействия.
Конструкция ПЭВМ должна обеспечивать мощность экспозиционной дозы рентгеновского излучения в любой точке на расстоянии 0,05 м от экрана и корпуса при любых положениях регулировочных устройств не должна превышать 100 мкР/час.
Для защиты от вредного воздействия излучений возможно применение заземленных защитных экранов, значительно уменьшающих их интенсивность. Кроме того, рекомендуется использовать мониторы современные мониторы, которые можно использовать без защитных экранов, так как они покрыты специальным антибликовым составом для лучшего восприятия изображения и для уменьшения отражения внешнего освещения.
Спектр излучения монитора компьютера включает в себя рентгеновскую, ультрафиолетовую и инфракрасную области. Поскольку источник высокого напряжения монитора - строчный трансформатор - помещается в задней или боковой части терминала, уровень излучения со стороны задней панели монитора выше, причем стенки корпуса не экранируют излучение. Поэтому пользователи должны находиться не ближе чем на 1,2 метра от задних и боковых стенок соседних терминалов, что было обеспечено правильным расположением рабочих мест пользователей ПЭВМ.[6]
3.3 Меры безопасности при работе на ПЭВМ
Электробезопасность. Современные ЭВМ питаются от сети переменного тока напряжением 220 В и частотой 50 Гц. Это приводит к наличию в конструкции токоведущих элементов, находящихся под напряжением, опасным для жизни людей и требует принятия специальных мер по защите персонала от поражения электрическим током. Значительная потребляемая мощность, большая часть которой рассеивается в окружающее пространство в виде тепла, приводит к дополнительному тепловому нагреву. Вредные сами по себе, в сумме эти два фактора приводят еще и к пожарной опасности .