у меня возникла такая проблема - есть файлы styleForLaba.css, program.js, laba5.2.html,(Прикреплю их сюда),при подключении css (либо через css файл,либо через style в html файле) не работают описанные свойства для классов.Пробовал добавлять стили через DevTools и все работает.Подскажите,пожалуйста,в чем может быть проблема?
questions = [
{
idQuest: 1,
textQuest: "HTML (Hyper Text Markup Language) является:"
},
{
idQuest: 2,
textQuest: "Инструкция браузеру, указывающая способ отображения текста: "
},
{
idQuest: 3,
textQuest: "Web-страница (документ HTML) представляет собой: "
},
{
idQuest: 4,
textQuest: "Гипертекст - это: "
},
{
idQuest: 5,
textQuest: "Вычеслите: 44<sub>5</sub> + 22<sub>3</sub>"
},
{
idQuest: 6,
textQuest: "Известно,что в кодовой таблице ASCII десятичный код символа 1 равен 49.Каков десятичный код символа 9? "
},
{
idQuest: 7,
textQuest: "Дано: а = 20<sub>10</sub>,b = 22<sub>8</sub>.Какое из чисел <i>c</i>,записанных в двоичной системе,отвечает условию <i>b<c<a</i>? "
},
{
idQuest: 8,
textQuest: "К устройствам вывода информации относится? "
},
{
idQuest: 9,
textQuest: "Устройство,которое не используется для долговременного хранения информации - это? "
},
{
idQuest: 10,
textQuest: "Поле, значение которого однозначно определяет запись в таблице базы данных, называется "
},
{
idQuest: 11,
textQuest: "Графика с представлением изображения в виде совокупности точек называется"
},
{
idQuest: 12,
textQuest: "Под искусственным интелектом обычно понимают "
},
{
idQuest: 13,
textQuest: "В виде комбинации оттенков, каких трех основных цветов представлена каждая точка, из массива цветовых точек экрана монитора? "
},
{
idQuest: 14,
textQuest: "Стандартизация - это: "
},
{
idQuest: 15,
textQuest: "Тексты, рисунки, фотографии, световые и звуковые сигналы, радиоволны, электрические нервные импульсы, магнитные записи это: "
},
{
idQuest: 16,
textQuest: "Как называют сеть, в которой один ПК главный?"
},
{
idQuest: 17,
textQuest: "Какое, из перечисленных устройств, имеет узкоспециализированный процессор и оперативную память? "
},
{
idQuest: 18,
textQuest: "Электронная почта (E-mail) позволяет передавать: "
},
{
idQuest: 19,
textQuest: "Как называется процесс передачи сообщений в электронном виде?"
},
{
idQuest: 20,
textQuest: "Почтовый ящик абонента электронной почты - это "
}
];
answers = [
{
idAnsw: 1,
idQuest: 1,
textAnsw: "одним из средств при создании web-страниц",
isTrue: true
},
{
idAnsw: 2,
idQuest: 1,
textAnsw: "системой программирования",
isTrue: false
},
{
idAnsw: 3,
idQuest: 1,
textAnsw: "графическим редактором",
isTrue: false
},
{
idAnsw: 4,
idQuest: 1,
textAnsw: "системой управления базами данных",
isTrue: false
},
{
idAnsw: 5,
idQuest: 2,
textAnsw: "программный код",
isTrue: false
},
{
idAnsw: 6,
idQuest: 2,
textAnsw: "тэг ",
isTrue: true
},
{
idAnsw: 7,
idQuest: 2,
textAnsw: "файл",
isTrue: false
},
{
idAnsw: 8,
idQuest: 2,
textAnsw: "кегль",
isTrue: false
},
{
idAnsw: 9,
idQuest: 3,
textAnsw: "текстовый файл с расширением txt или doc",
isTrue: false
},
{
idAnsw: 10,
idQuest: 3,
textAnsw: "текстовый файл с расширением htm или html",
isTrue: true
},
{
idAnsw: 11,
idQuest: 3,
textAnsw: "двоичный файл с расширением com или exe",
isTrue: false
},
{
idAnsw: 12,
idQuest: 3,
textAnsw: "графический файл с расширением gif или jpg",
isTrue: false
},
{
idAnsw: 13,
idQuest: 4,
textAnsw: "текст очень большого размера",
isTrue: false
},
{
idAnsw: 14,
idQuest: 4,
textAnsw: "текст, в котором используется шрифт большого размера",
isTrue: false
},
{
idAnsw: 15,
idQuest: 4,
textAnsw: "структурированный текст, где возможны переходы по выделенным меткам",
isTrue: true
},
{
idAnsw: 16,
idQuest: 4,
textAnsw: "текст, в который вставлены объекты с большим объемом информации",
isTrue: false
},
{
idAnsw: 17,
idQuest: 5,
textAnsw: "1 111",
isTrue: false
},
{
idAnsw: 18,
idQuest: 5,
textAnsw: "10 000",
isTrue: false
},
{
idAnsw: 19,
idQuest: 5,
textAnsw: "10 111",
isTrue: false
},
{
idAnsw: 20,
idQuest: 5,
textAnsw: "10 011",
isTrue: true
},
{
idAnsw: 21,
idQuest: 6,
textAnsw: "51",
isTrue: false
},
{
idAnsw: 22,
idQuest: 6,
textAnsw: "53",
isTrue: false
},
{
idAnsw: 23,
idQuest: 6,
textAnsw: "55",
isTrue: false
},
{
idAnsw: 24,
idQuest: 6,
textAnsw: "57",
isTrue: true
},
{
idAnsw: 25,
idQuest: 7,
textAnsw: "100<sub>10</sub>",
isTrue: false
},
{
idAnsw: 26,
idQuest: 7,
textAnsw: "100 000<sub>2</sub>",
isTrue: true
},
{
idAnsw: 27,
idQuest: 7,
textAnsw: "222<sub>3</sub>",
isTrue: false
},
{
idAnsw: 28,
idQuest: 7,
textAnsw: "66<sub>8</sub>",
isTrue: false
},
{
idAnsw: 29,
idQuest: 8,
textAnsw: "Монитор",
isTrue: true
},
{
idAnsw: 30,
idQuest: 8,
textAnsw: "Клавиатура",
isTrue: false
},
{
idAnsw: 31,
idQuest: 8,
textAnsw: "Микрофон",
isTrue: true
},
{
idAnsw: 32,
idQuest: 8,
textAnsw: "Сканер",
isTrue: false
},
{
idAnsw: 33,
idQuest: 9,
textAnsw: "Жесткий диск",
isTrue: false
},
{
idAnsw: 34,
idQuest: 9,
textAnsw: "Флэш-Карта",
isTrue: false
},
{
idAnsw: 35,
idQuest: 9,
textAnsw: "Оперативное запоминающее устройство(ОЗУ)",
isTrue: true
},
{
idAnsw: 36,
idQuest: 9,
textAnsw: "CD-диск",
isTrue: false
},
{
idAnsw: 37,
idQuest: 10,
textAnsw: "Внешнее",
isTrue: false
},
{
idAnsw: 38,
idQuest: 10,
textAnsw: "Внутренее",
isTrue: false
},
{
idAnsw: 39,
idQuest: 10,
textAnsw: "Индексированное",
isTrue: false
},
{
idAnsw: 40,
idQuest: 10,
textAnsw: "Ключевое",
isTrue: true
},
{
idAnsw: 41,
idQuest: 11,
textAnsw: "Фрактальная",
isTrue: false
},
{
idAnsw: 42,
idQuest: 11,
textAnsw: "Векторная",
isTrue: false
},
{
idAnsw: 43,
idQuest: 11,
textAnsw: "Растровая",
isTrue: true
},
{
idAnsw: 44,
idQuest: 11,
textAnsw: "Прямоугольная",
isTrue: false
},
{
idAnsw: 45,
idQuest: 12,
textAnsw: "пособности компьютерных систем к таким действиям, которые назывались бы интеллектуальными, если бы исходили от человека",
isTrue: true
},
{
idAnsw: 46,
idQuest: 12,
textAnsw: "класс пакетов включает: информационные системы, поддерживающие диалог на естественном языке",
isTrue: false
},
{
idAnsw: 47,
idQuest: 12,
textAnsw: "способности, связанные с человеческим мышлением",
isTrue: false
},
{
idAnsw: 48,
idQuest: 12,
textAnsw: "интеллектуальные пакеты прикладных программ, позволяющие решать прикладные задачи без программирования",
isTrue: false
},
{
idAnsw: 49,
idQuest: 13,
textAnsw: "черный, белый и красный",
isTrue: false
},
{
idAnsw: 50,
idQuest: 13,
textAnsw: "черный, синий и белый",
isTrue: false
},
{
idAnsw: 51,
idQuest: 13,
textAnsw: "красный, синий и зеленый",
isTrue: true
},
{
idAnsw: 52,
idQuest: 13,
textAnsw: "белый, синий и красный",
isTrue: false
},
{
idAnsw: 53,
idQuest: 14,
textAnsw: "инструмент государственной технической политики, деятельность по установлению правил и характеристик в целях их добровольного многократного использования, направленная на достижение упорядоченности в сферах производства и обращения продукции",
isTrue: true
},
{
idAnsw: 54,
idQuest: 14,
textAnsw: "виды нормативно-технических документов в Российской Федерации",
isTrue: false
},
{
idAnsw: 55,
idQuest: 14,
textAnsw: "стандарт, утвержденный национальным органом РФ по стандартизации",
isTrue: false
},
{
idAnsw: 56,
idQuest: 14,
textAnsw: "стандарт, принятый международной организацией",
isTrue: false
},
{
idAnsw: 57,
idQuest: 15,
textAnsw: "формы информации",
isTrue: true
},
{
idAnsw: 58,
idQuest: 15,
textAnsw: "виды информации",
isTrue: false
},
{
idAnsw: 59,
idQuest: 15,
textAnsw: "способы обработки информации",
isTrue: false
},
{
idAnsw: 60,
idQuest: 15,
textAnsw: "информационные процессы",
isTrue: false
},
{
idAnsw: 61,
idQuest: 16,
textAnsw: "сеть – клиент",
isTrue: false
},
{
idAnsw: 62,
idQuest: 16,
textAnsw: "сеть - сервер",
isTrue: false
},
{
idAnsw: 63,
idQuest: 16,
textAnsw: "сеть клиент - сервер",
isTrue: true
},
{
idAnsw: 64,
idQuest: 16,
textAnsw: "серверная сеть",
isTrue: false
},
{
idAnsw: 65,
idQuest: 17,
textAnsw: "принтер",
isTrue: true
},
{
idAnsw: 66,
idQuest: 17,
textAnsw: "сканер",
isTrue: false
},
{
idAnsw: 67,
idQuest: 17,
textAnsw: "копир",
isTrue: false
},
{
idAnsw: 68,
idQuest: 17,
textAnsw: "ксерокс",
isTrue: false
},
{
idAnsw: 69,
idQuest: 18,
textAnsw: "только сообщения и файлы",
isTrue: false
},
{
idAnsw: 70,
idQuest: 18,
textAnsw: "только файлы и гипертекст",
isTrue: false
},
{
idAnsw: 71,
idQuest: 18,
textAnsw: "только гипертекст и сообщения",
isTrue: false
},
{
idAnsw: 72,
idQuest: 18,
textAnsw: "сообщения и приложенные файлы",
isTrue: true
},
{
idAnsw: 73,
idQuest: 19,
textAnsw: "электронная почта",
isTrue: true
},
{
idAnsw: 74,
idQuest: 19,
textAnsw: "спам",
isTrue: false
},
{
idAnsw: 75,
idQuest: 19,
textAnsw: "рассылка сообщений",
isTrue: false
},
{
idAnsw: 76,
idQuest: 19,
textAnsw: "пересылка сообщений",
isTrue: false
},
{
idAnsw: 77,
idQuest: 20,
textAnsw: "часть оперативной памяти на сервере",
isTrue: false
},
{
idAnsw: 78,
idQuest: 20,
textAnsw: "часть внешней памяти на сервере",
isTrue: false
},
{
idAnsw: 79,
idQuest: 20,
textAnsw: "часть оперативной памяти на рабочей станции",
isTrue: true
},
{
idAnsw: 80,
idQuest: 20,
textAnsw: "часть внешней памяти на рабочей станции",
isTrue: false
},
]
var NewArray = [];
function ResetTest() {
document.body.innerHTML = " ";
document.write('<div id="MustBeHidden">Введите количество вопросов n(будет n случайных вопросов) <input type =number min=2 max=20 name="number" id="number"><input type=button value=Сгенерировать onClick="randomTest()" ></div>');
document.write('</form>');
}
function randomTest() {
document.getElementById('MustBeHidden').style.display = "none";
var n = document.getElementById('number').value;
document.write("<h1>Тест </h1>");
document.write("<form>");
for (var i = 0; i < n; i++) {
var prove = 1;
while (prove > 0) {
prove = 0;
var m = +Math.floor(Math.random() * 20);
for (var k = 0; k <= NewArray.length; k++)
if (m == NewArray[k]) prove++;
}
NewArray.push(m);
document.write('<div class="quest" id = q' + questions[m].idQuest + ' > ' + (i + 1) + '. ' + questions[m].textQuest + "</div><div><ul>");
for (var j = 0; j < answers.length; j++) {
if (answers[j].idQuest != questions[m].idQuest) continue;
document.write('<li><input type =radio name=ansQ' + questions[i].idQuest + ' value=a' + questions[m].idQuest + '_' + answers[j].idAnsw + ' onClick="ChangeQuestionsColor()">' + answers[j].textAnsw + '</li>');
}
document.write('</ul></div>');
}
document.write('<input type = button value="Проверить тест" ' +
'onClick = "checkTest()">');
document.write('<input type = button value="Новый тест"' + 'onClick = "ResetTest()">');
document.write('</form>');
var EllementsOnPage = document.getElementsByClassName('quest');
for (var i = 0; i < EllementsOnPage.length; i++) {
EllementsOnPage[i].style.border = '5px outset green';
EllementsOnPage[i].style.backgroundColor = 'green';
EllementsOnPage[i].style.color = 'white';
}
return NewArray;
}
function checkTest() {
// формируем массив из всех элементов input на странице
var arrAnswers = document.getElementsByTagName("input");
//переменная для подсчета правильных ответов
var countCorrectAnswers = 0;
// строка для накопления вопросов, на которые пользователь
// ответил неверно
var strUnCorrectAnswers = '';
//количество вопросов, на которые пользователь дал ответ
var questionChecked = 0;
var ForCheckingAnswers = document.getElementsByClassName('quest');
for (var i = 0; i < arrAnswers.length; i++) {
if (arrAnswers[i].checked) {
questionChecked++;
//проверяем правильность ответа, если ответ верный,
//то увеличиваем количество верных ответов
//в противном случае - заносим вопрос в строку неправильных
if (isRightAnswer(arrAnswers[i].value)) countCorrectAnswers++;
else strUnCorrectAnswers += getQuestion(arrAnswers[i].value)
+ "\n";
}
}
// проверяем, на все ли вопросы ответил пользователь,
// если на все вопросы есть ответы - выводим результат
if (questionChecked != questions.length) {
for (i = 0; i < ForCheckingAnswers.length; i++) {
ForCheckingAnswers[i].style.backgroundColor = 'red';
}
}
else if (countCorrectAnswers == questions.length)
alert('Вы ответили правильно на все вопросы верно!')
else alert("Количество правильных ответов: " +
countCorrectAnswers +
"\nВы ответили неверно на следующие вопросы:\n" +
strUnCorrectAnswers);
}
function ChangeQuestionsColor() {
var n = document.getElementById('number').value;
var arrAnswers = document.getElementsByTagName("input");
for (var i = 0; i < n; i++) {
var CheckedQuestion = false;
for (var j = 0; j < 4; j++)
if (arrAnswers[j + i * 4].checked) CheckedQuestion = true;
if (CheckedQuestion == true) document.getElementById('q' + questions[NewArray[i]].idQuest).style.backgroundColor = "green";
}
}
/* функция выдает верный или неверный вариант ответа выбрал
пользователь на некоторый вопрос, переданный параметр - значение типа
a_2_5, где 2 - номер вопроса, 5 - номер ответа*/
function isRightAnswer(str) {
//выделяем номер вопроса
var idUserQuest = str.substring(1, str.indexOf('_'));
//выделяем номер ответа
var idUserAnsw = str.substring(str.indexOf('_') + 1)
// ищем в массиве ответов вариант, выбранный пользователем,
// и возвращаем результат, правильный он или нет
for (var i = 0; i < answers.length; i++) {
if (answers[i].idQuest != idUserQuest) continue;
if (answers[i].idAnsw != idUserAnsw) continue;
return answers[i].isTrue;
}
return false;
}
// формируем текст вопроса,
//переданный параметр - значение типа a_2_5, где 2 - номер вопроса
function getQuestion(str) {
//выделяем номер вопроса
var idUserQuest = str.substring(1, str.indexOf('_'));
//ищем в массиве текст нужного вопроса
for (var i = 0; i < questions.length; i++) {
if (questions[i].idQuest != idUserQuest) continue;
return questions[i].textQuest;
}
return false;
}
ul {
list-style-type: circle;
}
.quest {
background-color: green;
}
.quest {
font-size: 50px;
}
<html>
<head>
<meta charset="utf-8" />
<!-- <style>
body {
font-size: 100px;
}
ul {
list-style-type: circle;
}
.quest {
background-color: green;
}
.quest {
font-size: 50px;
}
</style> -->
</head>
<body onload="ResetTest()" style="font-size:100px">
<script type="text/javascript" src="program.js"></script>
</body>
</html>
Это происходит из-за того, что выполнение document.write у вас прописано при загрузке, что переписывает всю страницу, и head
, в котором были все подключения. Вы сразу при загрузке страницы пытаетесь писать html код в js. Можно сделать проще и правильнее: через document.createElement он не будет влиять на подключения, а уже в созданный таким образом элемент дописывать через inner. Вот пример:
var div = document.createElement('div');
div.className = "first";
//div.innerHTML = "";
var ul = document.createElement('ul');
for(var i=0; i<5; i++){
var li = document.createElement('li');
li.className = "second";
li.innerHTML = "Text "+i;
ul.appendChild(li);
}
div.appendChild(ul);
var bod = document.getElementById('bod');//Добавить id=bod в body
bod.appendChild(div);
Ну, и соответственно его надо писать после body:
<body id="bod" style="font-size:12px">
</body>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы он был сосредоточен только на одной проблеме
Ситуация, казалось, простая, но я окончательно запуталсяСуть в том, что надо каждому элементу добавить id значение которого = атрибуту value
Вставлял такой код в ссылку