Free javascript Hosting


printer-dragndrop.js

Uploaded on Jan 06 2022 17:22 by irirath

$('#link-to-tab1').on('click', function(evt){
$('#target-tab-link1').triggerHandler('click');
evt.preventDefault();
});

$('#link-to-tab2').on('click', function(evt){
$('#target-tab-link2').triggerHandler('click');
evt.preventDefault();
});

$('#link-to-tab2b').on('click', function(evt){
$('#target-tab-link2').triggerHandler('click');
evt.preventDefault();
});

$('#link-to-tab3').on('click', function(evt){
$('#target-tab-link3').triggerHandler('click');
evt.preventDefault();
});

$('#link-to-tab3b').on('click', function(evt){
$('#target-tab-link3').triggerHandler('click');
evt.preventDefault();
});

$('#link-to-tab4').on('click', function(evt){
$('#target-tab-link4').triggerHandler('click');
evt.preventDefault();
});
$('#link-to-tab4b').on('click', function(evt){
$('#target-tab-link4').triggerHandler('click');
evt.preventDefault();
});
$('#link-to-tab5').on('click', function(evt){
$('#target-tab-link5').triggerHandler('click');
evt.preventDefault();
});
$('#link-to-tab5b').on('click', function(evt){
$('#target-tab-link5').triggerHandler('click');
evt.preventDefault();
});
$('#link-to-tab6').on('click', function(evt){
$('#target-tab-link6').triggerHandler('click');
evt.preventDefault();
});

// JavaScript Document
var totalmovers
var pool=['<li id="mover1" class="liwhite">Yübo's 3D printer</li>',
'<li id="mover2" class="liwhite">Henning's 3D printer</li>',
'<li id="mover3" class="liwhite">Michelle's 3D printer</li>',
'<li id="mover4" class="liwhite">Justin's 3D printer</li>',
'<li id="mover5" class="liwhite">Julia's 3D printer</li>',
'<li id="mover6" class="liwhite">Irina's 3D printer</li>',
'<li id="mover7" class="liwhite">Silvia's 3D printer</li>',
'<li id="mover8" class="liwhite">BarRobot</li>'];

//standard .ready(init) function - allows all pages to load before scripts can take effect
$(document).ready(init);
//init function
function init(){
pool.shuffle();
for(var x=0; x<8; x++){
$('#pool').append(pool[x]);
}
totalmovers = $('ul#pool li').length ;
$('#pool').sortable({
connectWith: ".takercontent",
placeholder: "tempstate",
forcePlaceholderSize:true
})
$('.takercontent').sortable({
connectWith: "#pool, .takercontent",
placeholder: "tempstate",
forcePlaceholderSize:true,
receive: function(event, ui) {
if ($(this).children().length > 1) {
$(ui.sender).sortable('cancel');
}
}
})
$('#validate').bind('click', validateactivity);
$('#seeanswer').bind('click', showanswers);

function validateactivity(){
for(var x=1; x<=totalmovers; x++){
if($('#mover'+x).parent().attr('id') == "takercontent"+x){
$('#takercontent'+x).css('border','2px solid #0F0'); //green
$('#takercontent'+x).css('height','60px');
} else {
$('#takercontent'+x).css('border','2px solid #F00');
$('#takercontent'+x).css('height','60px');
}
}
}
function showanswers(){
for(var x=1; x<=totalmovers; x++){
$('#mover'+x).appendTo("#takercontent"+x);
$('#takercontent'+x).css('border','2px solid #0F0');
$('#takercontent'+x).css('height','60px');
}
}

Array.prototype.shuffle = function() {
var i = this.length, j, tempi, tempj;
if ( i == 0 ) return false;
while ( --i ) {
j = Math.floor( Math.random() * ( i + 1 ) );
tempi = this[i];
tempj = this[j];
this[i] = tempj;
this[j] = tempi;
}
return this;
}

$('#target-tab-link5').bind('click', startTour);
function startTour() {
introJs().setOptions({
tooltipClass: 'customTooltip',
exitOnOverlayClick: false,
steps: [{
intro: 'Welcome to our practice sessions about IIoT!👋 In the first exercise session, we hope to get you motivated to engage in the exercise session, which will help you to be able to complete the next exercises with understanding and assistance.'
},
{
element: document.getElementById('dtlivecam2'),
intro: 'Monitoring screen helps you to observe the status of the equipment you control in real time.',
position: 'left'
},
{
element: document.getElementById('extendCylinder1'),
intro: 'Please click on this button to see what happens in the live monitoring screen.',
position: 'left'
},
{
element: document.getElementById('extendCylinder2'),
intro: 'Please click on this button to see what happens in the live monitoring screen.',
position: 'left'
},
{
element: document.getElementById('retractCylinder2'),
intro: 'Please click on this button to see what happens in the live monitoring screen.',
position: 'left'
},
{
element: document.getElementById('retractCylinder1'),
intro: 'Please click on this button to see what happens in the live monitoring screen.',
position: 'left'
},
{
element: document.getElementById('gripperOpen'),
intro: 'Please click on this button to see what happens in the live monitoring screen.',
position: 'left'
},
{
element: document.getElementById('gripperClose'),
intro: 'Please click on this button to see what happens in the live monitoring screen.',
position: 'left'
},
{
intro: 'Congratulations!🎉 You have completed the first example of the first practice session!'
}
]
}).start();
}

Back to list