jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
99 lines (91 loc) • 4.68 kB
HTML
<html>
<head>
<title id="Description">This demo shows how to create a timer notification. It also
showcases a variety of notification templates.</title>
<meta name="keywords" content="functionality, jQuery notification, jQWidgets, jqxNotification, notification, timer, template, unobtrusive notification" />
<meta name="description" content="This demo shows how to create a timer notification. It also showcases a variety of notification templates." />
<link type="text/css" rel="Stylesheet" href="../../../jqwidgets/styles/jqx.base.css" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxnotification.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxinput.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/jscript">
$(document).ready(function () {
var notificationWidth = 300;
$("#timerNotification").jqxNotification({ width: notificationWidth, position: "top-right", autoOpen: true, closeOnClick: false, autoClose: false, showCloseButton: false, template: "time" });
$("#timeOutNotification").jqxNotification({ width: notificationWidth, position: "top-right", autoOpen: false, closeOnClick: true, autoClose: false, template: "time" });
$("#correctNotification").jqxNotification({ width: notificationWidth, position: "top-right", autoOpen: false, closeOnClick: true, autoClose: true, template: "success" });
$("#wrongNotification").jqxNotification({ width: notificationWidth, position: "top-right", autoOpen: false, closeOnClick: true, autoClose: true, template: "error" });
$("#errorTimeOutNotification").jqxNotification({ width: notificationWidth, position: "top-right", autoOpen: false, closeOnClick: true, autoClose: true, template: "error" });
$("#answerInput").jqxInput({ width: 50, height: 25 });
$("#submitAnswer").jqxButton();
// bind to the close event
$("#timerNotification").on("close", function () {
if ($("#answerInput").val() != 8) {
$("#timeOutNotification").jqxNotification("open");
}
});
$("#submitAnswer").click(function () {
if (seconds > 1) {
if ($("#answerInput").val() == 8) {
$("#correctNotification").jqxNotification("open");
clearInterval(interval);
$("#timerNotification").jqxNotification("closeLast");
} else {
$("#wrongNotification").jqxNotification("open");
}
} else {
$("#errorTimeOutNotification").jqxNotification("open");
}
});
var seconds = 30;
var interval = setInterval(function () {
if (seconds > 1) {
seconds--;
$(".timer").text(seconds);
} else {
clearInterval(interval);
$("#timerNotification").jqxNotification("closeLast");
}
}, 1000);
});
</script>
</head>
<body>
<!--Notifications-->
<div id="timerNotification">
<div>
Hurry, you have <span class="timer">30</span> seconds left!
</div>
</div>
<div id="timeOutNotification">
<div>Time is up!</div>
</div>
<div id="correctNotification">
<div>Your answer is correct.</div>
</div>
<div id="wrongNotification">
<div>Your answer is incorrect.</div>
</div>
<div id="errorTimeOutNotification">
<div>Time is up!</div>
</div>
<!--Layout-->
<div>
Solve the equasion in 30 seconds:
</div>
<div>
20 - 3 × 4 =
<input id="answerInput" type="text" />
</div>
<br />
<button id="submitAnswer">
Submit answer</button>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>