0

/* Words for learn */
var wordsToLearn = ["Blackmail", "Coat", "Skirt", "Recent", "Whole", "Necessary", "Responsible", "Aunt", "Positive", "Efficient", "Familiar", "Frequent", "Convenient", "Opposite", "Suit", "Pass", "Raise", "Consider", "Rest", "Across", "Order", "Definitely", "Weary", "Data", "Native", "Heritage", "Destination", "Comprise", "Numerous", "Rather"];

/* Translation */
var translation = ["Шантаж", "Пальто", "Юбка", "Недавний", "Целый, весь", "Необходимо", "Ответственный", "Тетя", "Уверенный", "Эффективный", "Знакомые", "Частый", "Удобный", "Противоположный", "Костюм", "Сдавать,передача", "Поднять", "Рассматривать, считать", "Отдыхать", "Через,поперек", "Заказ,состояние", "Определенно", "Усталый", "Данные", "Родной", "Наследие", "Место назначениия", "Включать, охватывать", "Многочисленный", "Скорее"];

/* Cheack Answer */
function checkAnswer(){
	var i = 0;
	do {
		var answer = prompt("Enter the translation of the word: " + wordsToLearn[i], "");
		if (answer === translation[i]) { /* Right answer */
			alert("Right: " + wordsToLearn[i] + " - " + translation[i]);
			
		}

		else if (answer === null || answer === undefined) { /* Answer = null or undefined */
			var cancel = confirm("Do you want to continue your test?");
				if (cancel != true) {
					alert("Good Bye!");
					break;
				} else {
					i = i - 1;
				}
		}
		
		else  { /* Not right answer */
			alert("Not right: " + answer + ". Right: " + wordsToLearn[i] + " - " + translation[i] );
		}
		i++;
	   }
	while (i<wordsToLearn.length);
};
body {
	margin: 0px;
	padding: 0px;
	background: url(images/fon.jpg) no-repeat;
	width: 500px;
	height: 600px;
}

/* Buttons */
#mainBlock {
	margin-left: 50px;
}

.button {
	position: absolute;
	float: right;
	width: 120px;
	height: 30px;
	cursor: pointer;
	background-color: #F6F686;
	border-radius: 6px;
	border: none;
}

#startTest {
	margin-top: 150px;
}

#addWords {
	margin-top: 200px;
}

#editWords {
	margin-top: 250px;
}

#resetList {
	margin-top: 300px;
}

#mainBlock:active {
	opacity: 0;
}
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
	<link href="LW_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	
	
	<div id="mainBlock"> 
		<form>
			<input type="button" value="Start test" id="startTest" class="button" onclick="checkAnswer()">
	<!--	<input type="button" value="Add words" id="addWords" class="button">
			<input type="button" value="Edit words" id="editWords" class="button">
			<input type="button" value="Reset List" id="resetList" class="button"> -->
		</form>
	</div>
	
<script src="LW_JS.js"></script>	
</body>
</html>

Фон

Всем привет. Я пытаюсь создать тест для изучения слов(в данном случае - английских). У меня при нажатии на "Start test" запускается модальное окно prompt, которое запрашивает перевод какого-либо слова. Далее alert выводит на экран правильно или неправильно написан перевод. Если нажать на отмену или ничего не ввести окно confirm выведет подтверждение о продолжении теста или о его завершении. Так вот, как можно сделать следующее:

1) Вместо стандартного "OK, отмена" окна prompt хотелось бы, чтобы было "ОК, пропустить, отмена".

2) Вместо "ОК, отмена" окна confirm нужно "Да, нет".

3) Да и вообще нужно, чтобы я мог полностью задавать стиль окнам(их фон, цвет и прочее)

9
  • значит надо писать свои модальные окна или использовать плагины а-ля jqueryui.com/dialog/#modal-confirmation. Commented 4 июн. 2017 в 16:31
  • Чтобы переносы строк были нужно вставлять пустую строку
    – Alex78191
    Commented 4 июн. 2017 в 16:42
  • Создание собственных модальных окно интересно конечно, но вряд ли я справлюсь с текущими знаниями. А вот с jQuery у меня не особо что-то получается. Спасибо в любом случае! Commented 4 июн. 2017 в 16:43
  • Можно сразу готовую либу для викторины использовать github.com/jewlofthelotus/SlickQuiz
    – Alex78191
    Commented 4 июн. 2017 в 16:44
  • Сложно разобраться, попробую поискать еще плагинов. Спасибо Commented 4 июн. 2017 в 16:46

1 ответ 1

0

Можно Bootbox с Bootstrap использовать

2) Вместо "ОК, отмена" окна confirm нужно "Да, нет".

http://bootboxjs.com/examples.html#bb-confirm-dialog

bootbox.confirm({
    message: "Выйти",
    buttons: {
        confirm: {
            label: 'Да',
            className: 'btn-success'
        },
        cancel: {
            label: 'Нет',
            className: 'btn-danger'
        }
    },
    callback: function (result) {
        if (result)
        {
          bootbox.alert('Вы выбрали Да.')
         // ...
        }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

1) Вместо стандартного "OK, отмена" окна prompt хотелось бы, чтобы было "ОК, пропустить, отмена".

http://bootboxjs.com/documentation.html#bb-custom-dialog

bootbox.dialog({
  title: 'A custom dialog',
  message: `
      <input class="bootbox-input bootbox-input-time form-control">
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-warning">Cancel</button>
      </div>
  `,
  closeButton: false
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

3) Да и вообще нужно, чтобы я мог полностью задавать стиль окнам(их фон, цвет и прочее)

http://getbootstrap.com/javascript/#modals

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-warning">Cancel</button>
      </div>
    </div>
  </div>
</div>

5
  • Спасибо большое! Завтра обязательно разберу всю информацию Commented 4 июн. 2017 в 18:25
  • Опробовал все, функция просто перестала работать. Буду искать дальше Commented 5 июн. 2017 в 7:22
  • @АлександрЛямин Какая функция?
    – Alex78191
    Commented 5 июн. 2017 в 7:24
  • При клике на кнопку "Start test" запускается функция checkAnswer(). Я решил сначала попробовать изменить confirm. Все вставил, подключил и теперь при нажатии функция не запускается Commented 5 июн. 2017 в 7:25
  • @АлександрЛямин задайте новый вопрос.
    – Alex78191
    Commented 5 июн. 2017 в 8:44

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.