This question already has answers here:
Using jQuery to control HTML5 <audio> volume
(4 answers)
Closed 9 years ago.
I know about the .play(), and the .stop() methods.
But is there a way to link up a slider to the volume? Or a slider to the track position? Is that possible?
And help is appreciated. Thanks!
jQuery UI makes it quite simple:
$(function() {
var $aud = $("#audio"),
$pp = $('#playpause'),
$vol = $('#volume'),
$bar = $("#progressbar"),
AUDIO= $aud[0];
AUDIO.volume = 0.75;
AUDIO.addEventListener("timeupdate", progress, false);
function getTime(t) {
var m=~~(t/60), s=~~(t % 60);
return (m<10?"0"+m:m)+':'+(s<10?"0"+s:s);
}
function progress() {
$bar.slider('value', ~~(100/AUDIO.duration*AUDIO.currentTime));
$pp.text(getTime(AUDIO.currentTime));
}
$vol.slider( {
value : AUDIO.volume*100,
slide : function(ev, ui) {
$vol.css({background:"hsla(180,"+ui.value+"%,50%,1)"});
AUDIO.volume = ui.value/100;
}
});
$bar.slider( {
value : AUDIO.currentTime,
slide : function(ev, ui) {
AUDIO.currentTime = AUDIO.duration/100*ui.value;
}
});
$pp.click(function() {
return AUDIO[AUDIO.paused?'play':'pause']();
});
});
#player{
position:relative;
margin:50px auto;
width:300px;
text-align:center;
font-family:Helvetica, Arial;
}
#playpause{
border:1px solid #eee;
cursor:pointer;
padding:12px 0;
color:#888;
font-size:12px;
border-radius:3px;
}
#playpause:hover{
border-color: #ccc;
}
#volume, #progressbar{
border:none;
height:2px;
}
#volume{
background:hsla(180,75%,50%,1);
}
#progressbar{
background:#ccc;
}
.ui-slider-handle{
border-radius:50%;
top: -5px !important;
width: 11px !important;
height: 11px !important;
margin-left:-5px !important;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.1.0.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="player">
<audio id="audio" src="http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg" autoplay loop>
<p>Your browser does not support the audio element </p>
</audio>
<div id="volume"></div><br>
<div id="progressbar"></div><br>
<div id="playpause"></div>
</div>
Related
I want two separate objects on a page to be moveable by the user - mouse click and drag.
I'm having all sorts of problems achieving this. the following test code baffles me. Both objects get moved and I cannot work out why.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title>Mouse move</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script language="JavaScript" type="text/JavaScript">
var cursorInPopUp = true;
var offsetx;
var offsety;
var nowX;
var nowY;
function initialiseFloating ()
{
document.onmousedown = PrepareFloatMove;
document.onmouseup = Function("cursorInPopUp=false");
}
function PrepareFloatMove()
{
if (event.target.id!="bar") return
offsetx = event.clientX
offsety = event.clientY
nowX = parseInt(document.getElementById("container").offsetLeft);
nowY = parseInt(document.getElementById("container").offsetTop);
cursorInPopUp = true;
document.onmousemove = moveFloat;
}
function moveFloat()
{
if (!cursorInPopUp)
{
document.body.style.cursor = 'default';
return;
}
document.body.style.cursor = 'move';
document.getElementById("container").style.left = nowX+event.clientX-offsetx
document.getElementById("container").style.top = nowY+event.clientY-offsety
return false;
}
</script>
<style>
.container
{
position : relative;
top:0px;
left;15%;
width:60%;
height:60%;
border:2px solid black;
}
.bar
{
position:relative;
top:0px;
width:100%;
height:10%;
border:2px solid red;
cursor:pointer;
}
.contents
{
position:relative;
top:0px;
width:100%;
height:88%;
border:2px solid green;
}
.container2
{
position : relative;
top:0px;
left;75%;
width:60%;
height:60%;
border:2px solid pink;
}
.bar2
{
position:relative;
top:0px;
width:100%;
height:10%;
border:2px solid blue;
cursor:pointer;
}
.contents2
{
position:relative;
top:0px;
width:100%;
height:88%;
border:2px solid yellow;
}
</style>
</head>
<body background="black">
<div id="container" class="container">
<div id="bar" class="bar">
</div>
<div id="contents" class="contents">
</div>
<div>
<div id="container2" class="container2">
<div id="bar2" class="bar2">
</div>
<div id="contents2" class="contents2">
</div>
<div>
<script> initialiseFloating('container');</script>
</body>
</html>
Any ideas will be gratefully received
I don't know what other detail to add. Both areas are the same but belong to different classes and have different IDs. the IDs of the second area do not appear in the javascript
I'm creation a video player which redirects to another video page when the video is over.
I want to add a 'Turn Auto Play Off Button' to disable the redirection script.
How can I do that?
My code:
<video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
video not supported
</video>
<button id="turnOfAutoPlay">Turn Of Auto Play</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myVideo").bind('ended', function() {
setTimeout(function() {
location.href = "http://www.localhost.com";
}, 3000)
});
});
</script>
You could remove the listener that fires at the end using unbind()
For jQuery < 1.7 use bind()/unbind()
$('#turnOfAutoPlay').click(function() {
$('#myVideo').unbind('ended');
})
Note: With jQuery 3.0 and up .bind()/.unbind() is deprecated. Use
on()/off()
function videoEndedHandler () {
setTimeout(function() {
location.href = "http://www.localhost.com";
}, 3000)
}
$(document).ready(function() {
document.getElementId("#myVideo").addEventListener('ended', videoEndedHandler);
});
$('#turnOfAutoPlay').on('click', function() {
document.getElementId('#myVideo').removeEventListener('ended', videoEndedHandler);
})
Use global variable for setTimeout function and on click of your "Turn Auto Play Off Button" call clearTimeout
Sample code:
var myVar;
function myFunction() {
myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}
function myStopFunction() {
clearTimeout(myVar);
}
Edit: here you go
<video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
video not supported
</video>
<button id="turnOfAutoPlay" onclick="myStopFunction()">Turn Of Auto Play</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var myVar;
$(document).ready(function() {
$("#myVideo").bind('ended', function() {
myVar = setTimeout(function() {
location.href = "http://www.localhost.com";
}, 3000)
});
});
function myStopFunction() {
clearTimeout(myVar);
}
</script>
I modified my code a bit with the help of above discussions, but I think it's lil bulky 😅😅, But it works...
My Code:
const autoplayCheckbox = document.getElementById('autoplayCheckbox');
const video = document.getElementById('myVideo');
var myVar;
function videoEndedHandler () {
myVar = setTimeout(function() {
location.href = "http://www.localhost.com";
}, 10000)
}
//By default autoplay is on.
$(document).ready(function() {
video.addEventListener('ended', videoEndedHandler);
});
autoplayCheckbox.addEventListener('change', function() {
if (this.checked) {
//if autoplay is on
document.getElementById("demo").innerHTML = "Autoplay: On";
$(document).ready(function() {
video.addEventListener('ended', videoEndedHandler);
});
} else {
//if autoplay is off
document.getElementById("demo").innerHTML = "Autoplay: Off";
video.removeEventListener('ended', videoEndedHandler);
}
});
function myStopFunction() {
clearTimeout(myVar);
document.getElementById("autoplayCheckbox").checked = false;
document.getElementById("demo").innerHTML = "Autoplay: Off";
}
* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
transition: background 0.4s linear;
background-color: #8ecae6;
font-family: 'oswald';
}
.checkbox {
opacity: 0;
position: absolute;
}
.checkbox:checked + .label .ball {
transform: translateX(23px);
}
.label {
background-color: #111;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 50px;
position: relative;
padding: 5px;
height: 26px;
width: 50px;
transform-scale(2.2);
}
.ball {
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
height: 22px;
width: 22px;
transition: transform 0.3s linear;
}
<br/><br/><video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
video not supported
</video>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- partial:index.partial.html -->
<div>
<input type="checkbox" class="checkbox" id="autoplayCheckbox" checked="checked">
<label for="autoplayCheckbox" class="label">
<div class="ball"></div>
</label>
</div>
<p id="demo">Autoplay: On</p>
<button id="turnOfAutoPlay" onclick="myStopFunction()">Turn Of Auto Play</button><br/><br/>
The Turn Of Autoplay button only works when 10sec Timeout function is going on..
I added that button because in the main project it also works as a button to dismiss the modal Have a look
Can i minify it??
I have this code
var video = document.getElementById('player');
video.volume = 0;
var muteBtn = document.getElementById('mute');
muteBtn.addEventListener('click',function(){
if(video.volume == 1){
video.volume = 0;
muteBtn.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-on-beli-1.png";
}
else{
video.volume = 1;
muteBtn.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-off-beli-1.png";
}
});
.buttons{
display:block;
width:50px;
height:50px;
background-color:black;
float:left;
}
#control{
width:1000px;
height:50px;
clear:both;
background-color:black;
}
<div id="control">
<img class="buttons"src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/play-beli-1.png" onClick="document.getElementById('player').play();"/>
<img class="buttons" src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/pause-beli-1.png" onClick="document.getElementById('player').pause();"/>
<img class="buttons" src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-on-beli-1.png" id="mute">
</div>
And I wish to make Play/Pause button toggle like mute button currently does.
https://jsfiddle.net/t6t0maw7/
I tried duplicating javascript and editing it with play/pause functions but with no luck.
Be free to edit jsfiddle.net and correct answer will be accepted.
JS Codes
var playPause = document.getElementById("play-pause");
playPause.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
playPause.classList.toggle('pause');
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
playPause.classList.toggle('pause');
}
});
css
button{
height:50px;
width:50px;
border:none;
outline:none;
}
button.play{
background:url("http://omniawebfactory.com/unik/wp-content/uploads/2016/10/play-beli-1.png");
background-size:100%;
}
button.pause{
background:url("http://omniawebfactory.com/unik/wp-content/uploads/2016/10/pause-beli-1.png");
background-size:100%;
}
Here is updated fiddle
Even kiran Gopal answer is correct.
I wanted to provide code i edited a little bit and it is working like charm.
I defined button images in javascript instead of css.
<video src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/video-za-SaB.mp4" autoplay="true" loop="true" width="100%" height="auto" id="plejer"></video>
<div id="control">
<img src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/pause-beli-1.png" id="play-pause" class="play"></img>
<img class="buttons" src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-off-beli-1.png" id="mute">
</div>
<script>
var video = document.getElementById('plejer');
video.volume = 0;
var muteBtn = document.getElementById('mute');
muteBtn.addEventListener('click',function(){
if(video.volume == 1){
video.volume = 0;
muteBtn.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-off-beli-1.png";
}
else{
video.volume = 1;
muteBtn.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-on-beli-1.png";
}
});
var playPause = document.getElementById("play-pause");
playPause.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
playPause.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/pause-beli-1.png";
// Update the button text to 'Pause'
playPause.classList.toggle('pause');
} else {
// Pause the video
video.pause();
playPause.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/play-beli-1.png";
// Update the button text to 'Play'
playPause.classList.toggle('pause');
}
});
</script>
<style>
.buttons{
display:block;
width:25.6px;
height:25.6px;
float:left;
}
.play{
display:block;
width:25.6px;
height:25.6px;
float:left;
margin-right:5px;
}
#control{
width:1000px;
height:25.6px;
clear:both;
position:absolute;
top:88%;
left:4%;
z-index:1;
}
#media only screen and (max-width: 500px) {
#control{
width:1000px;
height:25.6px;
clear:both;
position:absolute;
top:73%;
left:4%;
z-index:1;
}
</style>
I'm trying to simulate an animate effect via jQuery that consists drag and drop as events to be fired. The code I use seems to be fine until the point when I have to swap divs by setting their display to none/block. Whenever I swap to the first div it perfectly executes the animation but when it gets on the 2nd div (after swapped) it doesn't fire the droppable event. I chose to have id selectors for the respective divs to instance the container of the droppable event hence to animate. I'm stuck and are out of any solution after searching numerous results so far. Thank you in advance. Here is my JS fiddle I prepared to easily understand my problem.
<html>
<head>
<style>
#wrapper {
border: 1px solid gray;
height:300px;
margin: 0 auto;
padding: 20px 20px 20px 20px;
position:relative;
text-align:center;
width:600px;
}
p {
display:inline;
font-family:Calibri;
font-size:20px;
color: #0b1207;
text-shadow: #63c9b8 0px 10px 10px;
}
#div1, #div2 {
border: 1px dotted green;
bottom:0;
margin-left:100px;
position: absolute;
}
#div1 {
background-color: orange;
height:200px;
width:300px;
}
#div2 {
background-color: green;
display:none;
height:100px;
width:300px;
}
#btnchange {
background-color:black;
border-radius:10px;
color: #fff;
height:35px;
margin-top:10px;
margin-left:100px;
position:absolute;
width:80px;
}
.example {
border: 1px solid red;
background-color: blue;
height:75px;
margin: 5px auto 0 ;
width:75px;
}
</style>
</head>
<body>
<div id='wrapper'>
<p></p>
<div id='div1'></div>
<div id='div2'></div>
</div>
<button id ='btnchange' type='button'>Change</button>
<div class='example'></div>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://biostall.com/wp-content/uploads/2010/07/jquery-swapsies.js"></script>
<script type="text/javascript">
var id = 1;
var parent = document.getElementById('wrapper');
var makina = parent.children[id].id;
$(function(){
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$('.example').draggable({
containtment: "#" + makina,
cursor: "pointer",
revert: true
});
$('#btnchange').click(function(){
if (id == 1)
{
document.getElementById(makina).style.display = 'none';
id = 2;
makina = parent.children[id].id;
document.getElementById(makina).style.display = 'block';
document.getElementById('wrapper').children[0].innerText = makina;
}
else
{
document.getElementById(makina).style.display = 'none';
id = 1;
makina = parent.children[id].id;
document.getElementById(makina).style.display = 'block';
document.getElementById('wrapper').children[0].innerText = makina;
}
console.log(makina);
});
$("#" + makina).droppable({
drop: function(){
doAnimate(makina);}
});
});
function doAnimate(container)
{
$('#'+ container).animate({height: '+=10px'}, 500, function(){
var message = container.clientHeight;
$(this).html(message);
});
}
</script>
</body>
</html>
http://jsfiddle.net/xoxxbr4t/6/
Your problem is you were only calling droppable once, on only one of the items. Once the .droppable() function is also put inside the change button click, it should work.
put this inside change function:
$("#" + makina).droppable({
drop: function () {
doAnimate(makina);
}
});
example:
http://jsfiddle.net/xoxxbr4t/7/
You aren't binding droppable to your second element. You call this function once:
$("#" + makina).droppable({
drop: function () {
doAnimate(makina);
}
});
Since your "makina" at this point is div1, that's the only thing that gets bound. I made that it's own function:
function setDroppable(makina) {
$("#" + makina).droppable({
drop: function () {
doAnimate(makina);
}
});
}
And then called it for both divs in your setup:
setDroppable('div1');
setDroppable('div2');
And now it works fine. Here's the updated fiddle
Thanks Michal indeed that was the answer but I think a good programmer would reduce the redundant snippet of code as far as I can tell those are duplicate lines from the $(document).ready() function. However it's a solution. And right after I read your post I decided to post the answer myself as it follows:
//Previous
$("#" + makina).droppable({
drop: function () {
doAnimate(makina);
}
});
//Current
$("#wrapper").droppable({
drop: function () {
doAnimate(makina);
}
});
Since I'm using nested divs I then realised that I could make the parent div droppable and just animate the child which is active(shown).
I am having problems getting my code to work right. I know I have asked this question a few times, but I really need some input on it. Thanks to the someone on this site, I was able to get the code to work in jsFiddle, but not in my browser.
Any idea of what I am doing wrong?
HTML
<div class="fader tutorial" id="createquestion1">
<div class="arrow-w" style="font-size:1em;"></div>
Start by creating a title and selecting a folder for your question to be stored in.
</div>
<div class="fader tutorial" id="createquestion2">
<div class="arrow-w" style="font-size:1em;"></div>
Categories are key to your reporting effectiveness, be sure to include categories that relate to this question.
</div>
<div class="fader tutorial" id="createquestion3">
<div class="arrow-w" style="font-size:1em;"></div>
Select your options and/or upload an attachment (file, video or audio).
</div>
<div class="fader tutorial" id="createquestion4">
<div class="arrow-w" style="font-size:1em;"></div>
To create questions easier update your question preferences in your account area options. 
</div>
<div class="fader tutorial" id="createquestion5">
<div class="arrow-w" style="font-size:1em;"></div>
Your rationale can be used to provide feedback to students on this question and you also can use internal comment to track notes on changes, updates, textbook information and more.
</div>
<div class="fader tutorial" id="createquestion6">
<div class="arrow-w" style="font-size:1em;"></div>
Write your questions, answers and you are ready to go.
</div>
<input type="button" value="Start" id="start"/>
JS
function fadeLoop() {
var counter = 0,
divs = $('.fader').hide(),
dur = 500;
function showDiv() {
divs.fadeOut(dur) // hide all divs
.filter(function(index) {
return index == counter % divs.length;
}) // figure out correct div to show
.delay(dur) // delay until fadeout is finished
.fadeIn(dur); // and show it
counter++;
}; // function to loop through divs and show correct div
showDiv(); // show first div
return setInterval(function() {
showDiv(); // show next div
}, 5 * 1000); // do this every 5 seconds };
$(function() {
var interval;
$("#start").click(function() {
if (interval == undefined){
interval = fadeLoop();
$(this).val("Stop");
}
else{
clearInterval(interval);
$(this).val("Start");
interval = undefined;
}
}); });​
CSS
#start{
right:1em;
top:1em;
padding:1em;
}
.tutorial {
display: table;
border: 4px solid #8C3087;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow:1px 1px 3px 2px #ccc;
-webkit-box-shadow: 1px 1px 3px 2px #ccc;
box-shadow: 1px 1px 3px 2px #ccc;
position:absolute;
padding: 11px;
font-family: 'Archivo Narrow', sans-serif;
background-color:#ECA100;
width:200;
z-index:2000;
font-size:12pt;
color:#000;
vertical-align:top;
}
.arrow-n,
.arrow-e,
.arrow-s,
.arrow-w {
/*
* In Internet Explorer, The"border-style: dashed" will never be
* rendered unless "(width * 5) >= border-width" is true.
* Since "width" is set to "0", the "dashed-border" remains
* invisible to the user, which renders the border just like how
* "border-color: transparent" renders.
*/
border-style: dashed;
border-color: transparent;
border-width: 0.53em;
display: -moz-inline-box;
display: inline-block;
/* Use font-size to control the size of the arrow. */
font-size: 100px;
height: 0;
line-height: 0;
position: relative;
width: 0;
text-align:left;
}
.arrow-n {
border-bottom-width: 1em;
border-bottom-style: solid;
border-bottom-color: #8C3087;
bottom: 0.25em;
}
.arrow-e {
border-left-width: 1em;
border-left-style: solid;
border-left-color: #8C3087;
left: 0.25em;
}
.arrow-s {
border-top-width: 1em;
border-top-style: solid;
border-top-color: #8C3087;
top: 0.25em;
}
.arrow-w {
border-right-width: 1em;
border-right-style: solid;
border-right-color: #8C3087;
right: 0.25em;
}
/* Create Multiple Choice Question */
#createquestion1 {
top:140px;
left:320px;
text-align:left;
}
#createquestion2 {
top:240px;
left:320px;
text-align:left;
}
#createquestion3 {
top:340px;
left:320px;
text-align:left;
}
#createquestion4 {
top:60px;
right:10px;
text-align:right !important;
}
#createquestion5 {
top:520px;
left:320px;
text-align:left;
}
#createquestion6 {
top:140px;
left:100px;
text-align:right !important;
}
Lots ups to anyone who can help me! The page I am working in is an asp. I am open to new ideas also. Ideally, I would love to make this happen entirely in CSS3...​
Working code: :-)
</script>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
fadeLoop()
function fadeLoop() {
var counter = 0,
divs = $('.fader').hide(),
dur = 300;
function showDiv() {
$("div.fader").fadeOut(dur) // hide all divs
.filter(function(index) {
return index == counter % divs.length;
}) // figure out correct div to show
.delay(dur) // delay until fadeout is finished
.fadeIn(dur); // and show it
counter++;
}; // function to loop through divs and show correct div
showDiv(); // show first div
return setInterval(function() {
showDiv(); // show next div
}, 7 * 1000); // do this every 5 seconds
};
$(function() {
var interval;
$("#start").click(function() {
if (interval == undefined){
interval = fadeLoop();
$(this).val("Stop");
}
else{
clearInterval(interval);
$(this).val("Start");
interval = undefined;
}
});
});
});
</script>
<!--#include file="header.asp"-->
<% if Request("interactive") = "on" then %>
<form name="tutorial">
<div class="fader"><div class="arrow-w arrowlocation1" style="font-size:1em;" ></div><div id="tutorial1" class="tutorial createquestion1">Start by creating a title and selecting a folder for your question to be stored in.</div></div>
<div class="fader"><div class="arrow-w arrowlocation2" style="font-size:1em;" ></div>
<div id="tutorial2" class="tutorial createquestion2">Categories are key to your reporting effectiveness, be sure to include categories that relate to this question.</div></div>
<div class="fader"><div class="arrow-w arrowlocation3" style="font-size:1em;" ></div>
<div id="tutorial3" class="tutorial createquestion3">Select your options and/or upload an attachment (file, video or audio).</div></div>
<div class="fader"><div class="quicktiptitle quicktiplocation4">QUICK TIP</div><div class="arrow-n arrowlocation4" style="font-size:1em;" ></div>
<div id="tutorial4" class="quicktip createquestion4">To create questions easier update your question preferences in your account area options.</div></div>
<div class="fader"><div class="arrow-w arrowlocation5" style="font-size:1em;" ></div>
<div id="tutorial5" class="tutorial createquestion5">Your rationale can be used to provide feedback to students on this question and you also can use internal comment to track notes on changes, updates, textbook information and more.</div></div>
<div class="fader"><div class="arrow-e arrowlocation6" style="font-size:1em;" ></div>
<div id="tutorial6" class="tutorial createquestion6">Write your questions, answers and you are ready to go.</div></div>
<div class="fader"><div class="arrow-w arrowlocation7" style="font-size:1em;" ></div>
<div class="quicktiptitle quicktiplocation7">QUICK TIP</div>
<div id="tutorial7" class="quicktip createquestion7"> Click on this icon to open and close sections that you don't use. These will remain closed whenever you visit this page until you open them again.</div></div></form>
<% end if %>