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. 4 июн 2017 в 16:31
  • Чтобы переносы строк были нужно вставлять пустую строку
    – Alex78191
    4 июн 2017 в 16:42
  • Создание собственных модальных окно интересно конечно, но вряд ли я справлюсь с текущими знаниями. А вот с jQuery у меня не особо что-то получается. Спасибо в любом случае! 4 июн 2017 в 16:43
  • Можно сразу готовую либу для викторины использовать github.com/jewlofthelotus/SlickQuiz
    – Alex78191
    4 июн 2017 в 16:44
  • Сложно разобраться, попробую поискать еще плагинов. Спасибо 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
  • Спасибо большое! Завтра обязательно разберу всю информацию 4 июн 2017 в 18:25
  • Опробовал все, функция просто перестала работать. Буду искать дальше 5 июн 2017 в 7:22
  • @АлександрЛямин Какая функция?
    – Alex78191
    5 июн 2017 в 7:24
  • При клике на кнопку "Start test" запускается функция checkAnswer(). Я решил сначала попробовать изменить confirm. Все вставил, подключил и теперь при нажатии функция не запускается 5 июн 2017 в 7:25
  • @АлександрЛямин задайте новый вопрос.
    – Alex78191
    5 июн 2017 в 8:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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