Benutzer:Hartmannw

Aus ProgrammingWiki

Wiki-Quelltext dieser Seite.

Hier kannst du Zufallssätze aus 4 Teilen erstellen lassen. Fülle die 4 Listen (Liste1 bis Liste4) mit deinen gewünschten Textstücken. Klicke dann auf "ausführen" und ziehe am Hebel. Du musst jedesmal auf "ausführen" klicken, wenn du in deinen Listen etwas änderst.
<html><script>
window.liste1 = [];
window.liste2 = [];
window.liste3 = [];
window.liste4 = [];
var a = new Audio("https://programmingwiki.de/images/start.mp3"); 
</script></html>
<run id="61ab8eba17f8a"> 
:Liste1
Twitter ist
Digitalisierung ist
Ein interaktives Smartboard ist
Web 2.0 ist
Snapchat ist
Facebook war

:Liste2
seit Erfindung des Buchdrucks
mitnichten
in gewisser Hinsicht
am Ende des Tages
quasi
sicherlich
bei aller Liebe

:Liste3
die größte Innovation
der größte Feind
eine Disruption
ein kleines Hindernis
eine Einladung
ein Albtraum

:Liste4
für den Erfolg.
für das Abitur.
für das Leben, das Universum und den ganzen Rest.
für die Zukunft.
für das Studium.

</run>
<html>
<style>
.slotMachineNoTransition {
    -webkit-transition: none !important;
            transition: none !important;
}

.slotMachineBlurFast {
    -webkit-filter: blur(5px);
            filter: blur(5px);
}

.slotMachineBlurMedium {
    -webkit-filter: blur(3px);
            filter: blur(3px);
}

.slotMachineBlurSlow {
    -webkit-filter: blur(2px);
            filter: blur(2px);
}

.slotMachineBlurTurtle {
    -webkit-filter: blur(1px);
            filter: blur(1px);
}

.slotMachineGradient {
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(25%, rgba(0,0,0,1)), color-stop(75%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,0)) );
    -webkit-mask: url("data:image/svg+xml;utf8,<svg version="1.1" xmlns="http:// www.w3.org/2000/svg" width="0" height="0"><mask id="slotMachineFadeMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"><linearGradient id="slotMachineFadeGradient" gradientUnits="objectBoundingBox" x="0" y="0"><stop stop-color="white" stop-opacity="0" offset="0"></stop><stop stop-color="white" stop-opacity="1" offset="0.25"></stop><stop stop-color="white" stop-opacity="1" offset="0.75"></stop><stop stop-color="white" stop-opacity="0" offset="1"></stop></linearGradient><rect x="0" y="-1" width="1" height="1" transform="rotate(90)" fill="url(#slotMachineFadeMask)"></rect></mask></svg>#slotMachineFadeMask");
            mask: url("data:image/svg+xml;utf8,<svg version="1.1" xmlns="http:// www.w3.org/2000/svg" width="0" height="0"><mask id="slotMachineFadeMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"><linearGradient id="slotMachineFadeGradient" gradientUnits="objectBoundingBox" x="0" y="0"><stop stop-color="white" stop-opacity="0" offset="0"></stop><stop stop-color="white" stop-opacity="1" offset="0.25"></stop><stop stop-color="white" stop-opacity="1" offset="0.75"></stop><stop stop-color="white" stop-opacity="0" offset="1"></stop></linearGradient><rect x="0" y="-1" width="1" height="1" transform="rotate(90)" fill="url(#slotMachineFadeMask)"></rect></mask></svg>#slotMachineFadeMask");
}

/*
 * Casino
 */
#casino h1{
	width: 100%;
	font-size: 40px;
}
#casino {
    border-top: 20px dotted rgb(180, 75, 119);
    background-color: rgb(240, 150, 150);
}

#casino .content:nth-child(1) {
    text-align: center;
    background: url('https://programmingwiki.de/images/machine.png') no-repeat 50% 45px;
    height: 580px;
}

#casino .content > div {
    clear:both;
    padding-top: 168px;
    width: 700px;
    margin: 0 auto;
}

.machineContainer{
	background-color: #000;
	padding: 5px 1px 5px 1px;
	overflow: hidden;
	height: 135px;
}

.slotMachine{
	width: 24%;
	border: 2px solid #000;
	height: 100px;
	padding: 0px;
	overflow: hidden;
	display: inline-block;
	text-align: center;
	background-color: #ffffff;
	cursor:pointer;
        box-sizing: border-box;
}

.btn-group-casino {
    margin-top: 150px;
}

.btn-group-casino .btn {
    border: none;
    background-color: rgb(209, 79, 119);
}
.btn-group-casino .btn:hover, .btn-group-casino .btn:focus {
    background-color: rgb(180, 75, 119);
}

.machineResult{
	color:#fff;
	text-align:center;
	font-weight: 900;
}
.noBorder{
	border:none !important;
	background: transparent !important;
}
.slotMachine .slot{
	height:100px;
	width:100%;
	background-position-x: 55%;
	display:table;
	background-repeat: no-repeat;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */      
}
.slotMachine .slot .inner{
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  font-size:18px;
  padding:4px;
 -ms-hyphens: auto;
 -webkit-hyphens: auto;
  hyphens: auto;
}

@keyframes blink {
    0% { opacity: .2; }
    20% { opacity: 1; }
    100% { opacity: .2;}
}
.handle {
  background:#333;
  border-radius:20px;
  transition-property: height, border-radius,bottom;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  position:absolute !important;
  margin-top:0px;
  bottom:0px;
}
.handle.clicked {
  height:60px !important;
  bottom:-50px;
}
.bullet {
  position:absolute;
  top:135px;
  border-radius:100px;
  width:26px;
  height:26px;
  background:rgb(238, 78, 115);
  animation-name: blink;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  box-shadow:0px -2px 5px rgba(0,0,0,0.2),0px 0px 5px rgb(238, 78, 115);
}
.bullet:nth-child(2) { animation-delay: .1s; }
.bullet:nth-child(3) { animation-delay: .2s; }
.bullet:nth-child(4) { animation-delay: .3s; }
.bullet:nth-child(5) { animation-delay: .4s; }
.bullet:nth-child(6) { animation-delay: .5s; }
.bullet:nth-child(7) { animation-delay: .6s; }
.bullet:nth-child(8) { animation-delay: .7s; }
.bullet:nth-child(9) { animation-delay: .8s; }
.bullet:nth-child(10) { animation-delay: .9s; }
.bullet:nth-child(11) { animation-delay: 1.0s; }
.bullet:nth-child(12) { animation-delay: 1.1s; }
.bullet:nth-child(13) { animation-delay: 1.2s; }
.bullet:nth-child(14) { animation-delay: 1.3s; }
.bullet:nth-child(15) { animation-delay: 1.4s; }
.bullet:nth-child(16) { animation-delay: 1.5s; }
.bullet:nth-child(17) { animation-delay: 1.6s; }
.bullet:nth-child(18) { animation-delay: 1.7s; }

</style>
<div id="casino" style="padding-top:10px;"><div class="content">

<div style="position:relative">
  <div style="width: 46px; height: 152px; position: absolute; right: -120px; top: 60px; cursor:pointer" id="handleBtn"><div style="width:100%;height:100%" class="handle sparkle"></div></div>
  
  <div class="bullet" style="left:50px"></div>
  <div class="bullet" style="left:86px"></div>
  <div class="bullet" style="left:122px"></div>
  <div class="bullet" style="left:158px"></div>
  <div class="bullet" style="left:194px"></div>
  <div class="bullet" style="left:230px"></div>
  <div class="bullet" style="left:267px"></div>
  <div class="bullet" style="left:303px"></div>
  <div class="bullet" style="left:339px"></div>
  <div class="bullet" style="left:375px"></div>
  <div class="bullet" style="left:411px"></div>
  <div class="bullet" style="left:447px"></div>
  <div class="bullet" style="left:484px"></div>
  <div class="bullet" style="left:520px"></div>
  <div class="bullet" style="left:556px"></div>
  <div class="bullet" style="left:592px"></div>
  <div class="bullet" style="left:629px"></div>
  <div id="spinners" style="margin-top: 55px;">
    <div id="casino1" class="slotMachine"></div>
    <div id="casino2" class="slotMachine"></div>
    <div id="casino3" class="slotMachine"></div>
    <div id="casino4" class="slotMachine"></div>
  </div>
</div>

</div></div>
<script>
/*! SlotMachine - v3.0.1 - 2016-03-03
* https://github.com/josex2r/jQuery-SlotMachine
* Copyright (c) 2016 Jose Luis Represa; Licensed MIT */
'use strict';

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

(function init($, window, document, undefined) {

    var pluginName = 'slotMachine',
        defaults = {
        active: 0,
        delay: 200,
        auto: false,
        spins: 5,
        randomize: null,
        complete: null,
        stopHidden: true,
        direction: 'up' },
        FX_NO_TRANSITION = 'slotMachineNoTransition',
        FX_FAST = 'slotMachineBlurFast',
        FX_NORMAL = 'slotMachineBlurMedium',
        FX_SLOW = 'slotMachineBlurSlow',
        FX_TURTLE = 'slotMachineBlurTurtle',
        FX_GRADIENT = 'slotMachineGradient',
        FX_STOP = FX_GRADIENT;

    var Timer = (function () {
        function Timer(cb, delay) {
            _classCallCheck(this, Timer);

            this.cb = cb;
            this.initialDelay = delay;
            this.delay = delay;
            this.deferred = jQuery.Deferred();
            this.startTime = null;
            this.timer = null;
            this.running = false;

            this.resume();

            return this;
        }

        _createClass(Timer, [{
            key: '_start',
            value: function _start() {
                this.timer = setTimeout((function cb() {
                    this.cb.call(this);
                }).bind(this), this.delay);
            }
        }, {
            key: 'cancel',
            value: function cancel() {
                this.running = false;
                clearTimeout(this.timer);
            }
        }, {
            key: 'pause',
            value: function pause() {
                if (this.running) {
                    this.delay -= new Date().getTime() - this.startTime;
                    this.cancel();
                }
            }
        }, {
            key: 'resume',
            value: function resume() {
                if (!this.running) {
                    this.running = true;
                    this.startTime = new Date().getTime();

                    this._start();
                }
            }
        }, {
            key: 'reset',
            value: function reset() {
                this.cancel();
                this.delay = this.initialDelay;
                this._start();
            }
        }, {
            key: 'add',
            value: function add(extraDelay) {
                this.pause();
                this.delay += extraDelay;
                this.resume();
            }
        }]);

        return Timer;
    })();

    var SlotMachine = (function () {
        function SlotMachine(element, options) {
            _classCallCheck(this, SlotMachine);

            this.element = element;
            this.settings = $.extend({}, defaults, options);
            this.defaults = defaults;
            this.name = pluginName;

            this.$slot = $(element);

            this.$tiles = this.$slot.children();

            this.$container = null;

            this._minTop = null;

            this._maxTop = null;

            this._$fakeFirstTile = null;

            this._$fakeLastTile = null;

            this._timer = null;

            this._spinsLeft = null;

            this.futureActive = null;

            this.running = false;

            this.stopping = false;

            this.active = this.settings.active;

            this.$slot.css('overflow', 'hidden');

            this.$container = this.$tiles.wrapAll('<div class="slotMachineContainer" />').parent();
            this.$container.css('transition', '1s ease-in-out');

            this._maxTop = -this.$container.height();

            this._initFakeTiles();

            this._minTop = -this._$fakeFirstTile.outerHeight();

            this._initDirection();

            this.resetPosition();

            if (this.settings.auto !== false) {
                if (this.settings.auto === true) {
                    this.shuffle();
                } else {
                    this.auto();
                }
            }
        }

        _createClass(SlotMachine, [{
            key: '_initFakeTiles',
            value: function _initFakeTiles() {
                this._$fakeFirstTile = this.$tiles.last().clone();
                this._$fakeLastTile = this.$tiles.first().clone();

                this.$container.prepend(this._$fakeFirstTile);
                this.$container.append(this._$fakeLastTile);
            }
        }, {
            key: '_initDirection',
            value: function _initDirection() {
                this._direction = {
                    selected: this.settings.direction === 'down' ? 'down' : 'up',
                    up: {
                        key: 'up',
                        initial: this.getTileOffset(this.active),
                        first: 0,
                        last: this.getTileOffset(this.$tiles.length),
                        to: this._maxTop,
                        firstToLast: this.getTileOffset(this.$tiles.length),
                        lastToFirst: 0
                    },
                    down: {
                        key: 'down',
                        initial: this.getTileOffset(this.active),
                        first: this.getTileOffset(this.$tiles.length),
                        last: 0,
                        to: this._minTop,
                        firstToLast: this.getTileOffset(this.$tiles.length),
                        lastToFirst: 0
                    }
                };
            }
        }, {
            key: '_changeTransition',
            value: function _changeTransition() {
                var delay = this._delay || this.settings.delay,
                    transition = this._transition || this.settings.transition;
                this.$container.css('transition', delay + 's ' + transition);
            }
        }, {
            key: '_animate',
            value: function _animate(margin) {
                this.$container.css('transform', 'matrix(1, 0, 0, 1, 0, ' + margin + ')');
            }
        }, {
            key: '_isGoingBackward',
            value: function _isGoingBackward() {
                var r = this.futureActive > this.active;
                if(this.active !== 0) r = false;
                if(this.futureActive !== this.$tiles.length - 1) r = false;
                return r;
            }
        }, {
            key: '_isGoingForward',
            value: function _isGoingForward() {
                var r = this.futureActive <= this.active;
                if(this.futureActive !== 0) r = false;
                if(this.active !== this.$tiles.length - 1) r = false;
                return r;
            }
        }, {
            key: 'raf',
            value: function raf(cb, timeout) {
                var _raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame,
                    startTime = new Date().getTime(),
                    _rafHandler = function _rafHandler() {
                    var drawStart = new Date().getTime(),
                        diff = drawStart - startTime;

                    if (diff < timeout) {
                        _raf(_rafHandler);
                    } else if (typeof cb === 'function') {
                        cb();
                    }
                };

                _raf(_rafHandler);
            }
        }, {
            key: 'getTileOffset',
            value: function getTileOffset(index) {
                var offset = 0;

                for (var i = 0; i < index; i++) {
                    offset += this.$tiles.eq(i).outerHeight();
                }

                return this._minTop - offset;
            }
        }, {
            key: 'resetPosition',
            value: function resetPosition(margin) {
                this.$container.toggleClass(FX_NO_TRANSITION);
                this._animate(margin === undefined ? this.direction.initial : margin);

                this.$container[0].offsetHeight;
                this.$container.toggleClass(FX_NO_TRANSITION);
            }
        }, {
            key: 'setRandomize',
            value: function setRandomize(rnd) {
                this.settings.randomize = rnd;

                if (typeof rnd === 'number') {
                    this.settings.randomize = function () {
                        return rnd;
                    };
                }
            }
        }, {
            key: 'prev',
            value: function prev() {
                this.futureActive = this.prevIndex;
                this.running = true;
                this.stop();

                return this.futureActive;
            }
        }, {
            key: 'next',
            value: function next() {
                this.futureActive = this.nextIndex;
                this.running = true;
                this.stop();

                return this.futureActive;
            }
        }, {
            key: 'getDelayFromSpins',
            value: function getDelayFromSpins(spins) {
                var delay = this.settings.delay;
                this._transition = 'linear';

                switch (spins) {
                    case 1:
                        delay /= 0.5;
                        this._transition = 'ease-out';
                        this._animationFX = FX_TURTLE;
                        break;
                    case 2:
                        delay /= 0.75;
                        this._animationFX = FX_SLOW;
                        break;
                    case 3:
                        delay /= 1;
                        this._animationFX = FX_NORMAL;
                        break;
                    case 4:
                        delay /= 1.25;
                        this._animationFX = FX_NORMAL;
                        break;
                    default:
                        delay /= 1.5;
                        this._animationFX = FX_FAST;
                }

                return delay;
            }
        }, {
            key: 'shuffle',
            value: function shuffle(spins, onComplete) {
                var _this = this;

                if (typeof spins === 'function') {
                    onComplete = spins;
                }
                this.running = true;
                var r = !this.visible;
                if(this.settings.stopHidden !== true) r = false;
                if (r) {
                    this.stop(onComplete);
                } else {
                    var delay = this.getDelayFromSpins(spins);
                    this.delay = delay;
                    this._animate(this.direction.to);
                    this.raf(function () {
                        if (!_this.stopping) if(_this.running) {
                            var left = spins - 1;

                            _this.resetPosition(_this.direction.first);
                            if (left <= 1) {
                                _this.stop(onComplete);
                            } else {
                                _this.shuffle(left, onComplete);
                            }
                        }
                    }, delay);
                }

                return this.futureActive;
            }
        }, {
            key: 'stop',
            value: function stop(onStop) {
                var _this2 = this;

                if (!this.running || this.stopping) {
                    return this.futureActive;
                }

                this.running = true;
                this.stopping = true;

                if (this.futureActive === null) {
                    this.futureActive = this.custom;
                }

                if (this._isGoingBackward()) {
                    this.resetPosition(this.direction.firstToLast);
                } else if (this._isGoingForward()) {
                    this.resetPosition(this.direction.lastToFirst);
                }

                this.active = this.futureActive;

                var delay = this.getDelayFromSpins(1);
                this.delay = delay;
                this._animationFX = FX_STOP;
                this._animate(this.getTileOffset(this.active));
                this.raf(function () {
                    _this2.stopping = false;
                    _this2.running = false;
                    _this2.futureActive = null;

                    if (typeof _this2.settings.complete === 'function') {
                        _this2.settings.complete.apply(_this2, [_this2.active]);
                    }

                    if (typeof onStop === 'function') {
                        onStop.apply(_this2, [_this2.active]);
                    }
                }, delay);

                return this.active;
            }
        }, {
            key: 'auto',
            value: function auto() {
                var _this3 = this;

                if (!this.running) {
                    this._timer = new Timer(function () {
                        if (typeof _this3.settings.randomize !== 'function') {
                            _this3.settings.randomize = function () {
                                return _this3._nextIndex;
                            };
                        }
                        var r = !_this3.visible;
                        if(_this3.settings.stopHidden !== true) r = false;
                        if (r) {
                            _this3.raf(_this3._timer.reset.bind(_this3._timer), 500);
                        } else {
                            _this3.shuffle(_this3.settings.spins, _this3._timer.reset.bind(_this3._timer));
                        }
                    }, this.settings.auto);
                }
            }
        }, {
            key: 'destroy',
            value: function destroy() {
                this._$fakeFirstTile.remove();
                this._$fakeLastTile.remove();
                this.$tiles.unwrap();
                $.data(this.element[0], 'plugin_' + pluginName, null);
            }
        }, {
            key: 'active',
            get: function get() {
                return this._active;
            },
            set: function set(index) {
                this._active = index;
                if (index < 0 || index >= this.$tiles.length) {
                    this._active = 0;
                }
            }
        }, {
            key: 'visibleTile',
            get: function get() {
                var firstTileHeight = this.$tiles.first().height(),
                    rawContainerMargin = this.$container.css('transform'),
                    matrixRegExp = /^matrix\(-?\d+,\s?-?\d+,\s?-?\d+,\s?-?\d+,\s?-?\d+,\s?(-?\d+)\)$/,
                    containerMargin = parseInt(rawContainerMargin.replace(matrixRegExp, '$1'), 10);

                return Math.abs(Math.round(containerMargin / firstTileHeight)) - 1;
            }
        }, {
            key: 'random',
            get: function get() {
                return Math.floor(Math.random() * this.$tiles.length);
            }
        }, {
            key: 'custom',
            get: function get() {
                var choosen = void 0;

                if (typeof this.settings.randomize === 'function') {
                    var index = this.settings.randomize.call(this, this.active);
                    if (index < 0 || index >= this.$tiles.length) {
                        index = 0;
                    }
                    choosen = index;
                } else {
                    choosen = this.random;
                }

                return choosen;
            }
        }, {
            key: 'direction',
            get: function get() {
                return this._direction[this._direction.selected];
            },
            set: function set(direction) {
                if (!this.running) {
                    this.direction = direction === 'down' ? 'down' : 'up';
                }
            }
        }, {
            key: '_prevIndex',
            get: function get() {
                var prevIndex = this.active - 1;

                return prevIndex < 0 ? this.$tiles.length - 1 : prevIndex;
            }
        }, {
            key: '_nextIndex',
            get: function get() {
                var nextIndex = this.active + 1;

                return nextIndex < this.$tiles.length ? nextIndex : 0;
            }
        }, {
            key: 'prevIndex',
            get: function get() {
                return this.direction === 'up' ? this._nextIndex : this._prevIndex;
            }
        }, {
            key: 'nextIndex',
            get: function get() {
                return this.direction === 'up' ? this._prevIndex : this._nextIndex;
            }
        }, {
            key: 'visible',
            get: function get() {
                var $window = $(window),
                    above = this.$slot.offset().top > $window.scrollTop() + $window.height(),
                    below = $window.scrollTop() > this.$slot.height() + this.$slot.offset().top;
                var r = !above;
                if(below) r = false;
                return r;
            }
        }, {
            key: '_fxClass',
            set: function set(FX_SPEED) {
                var classes = [FX_FAST, FX_NORMAL, FX_SLOW, FX_TURTLE].join(' ');

                this.$tiles.add(this._$fakeFirstTile).add(this._$fakeLastTile).removeClass(classes).addClass(FX_SPEED);
            }
        }, {
            key: '_animationFX',
            set: function set(FX_SPEED) {
                var delay = this.settings.delay / 4,
                    $elements = this.$slot.add(this.$tiles).add(this._$fakeFirstTile).add(this._$fakeLastTile);

                this.raf((function cb() {
                    this._fxClass = FX_SPEED;

                    if (FX_SPEED === FX_STOP) {
                        $elements.removeClass(FX_GRADIENT);
                    } else {
                        $elements.addClass(FX_GRADIENT);
                    }
                }).bind(this), delay);
            }
        }, {
            key: 'delay',
            set: function set(delay) {
                delay = delay / 1000;
                this._delay = delay;
                this._changeTransition();
            }
        }, {
            key: 'transition',
            set: function set(transition) {
                transition = transition || 'ease-in-out';
                this._transition = transition;
                this._changeTransition();
            }
        }]);

        return SlotMachine;
    })();

    function _getInstance(element, options) {
        var machine = void 0;
        if (!$.data(element[0], 'plugin_' + pluginName)) {
            machine = new SlotMachine(element, options);
            $.data(element[0], 'plugin_' + pluginName, machine);
        } else {
            machine = $.data(element[0], 'plugin_' + pluginName);
        }
        return machine;
    }

    $.fn[pluginName] = function initPlugin(options) {
        var _this4 = this;

        var instances = void 0;
        if (this.length === 1) {
            instances = _getInstance(this, options);
        } else {
            (function () {
                var $els = _this4;
                instances = $.map($els, function (el, index) {
                    var $el = $els.eq(index);
                    return _getInstance($el, options);
                });
            })();
        }
        return instances;
    };
})(jQuery, window, document);

var target1 = -1;
var target2 = -1;
var target3 = -1;
var target4 = -1;

function getNextRandom(i){
  var r = 0;
  if(i == 0) {
    r = Math.floor(Math.random()*liste1.length);
    if(target1 != -1) r = target1;
  }
  if(i == 1) {
    r = Math.floor(Math.random()*liste2.length);
    if(target2 != -1) r = target2;
  }
  if(i == 2) {
    r = Math.floor(Math.random()*liste3.length);
    if(target3 != -1) r = target3;
  }
  if(i == 3) {
    r = Math.floor(Math.random()*liste4.length);
    if(target4 != -1) r = target4;
  }
  return parseInt(r);          
};

function getNextRandom1(){ return getNextRandom(0); }
function getNextRandom2(){ return getNextRandom(1); }
function getNextRandom3(){ return getNextRandom(2); }
function getNextRandom4(){ return getNextRandom(3); }

var waitForStop = false;
var machine1;
var machine2;
var machine3;
var machine4;

function newShuffle(w){
  if(liste1.length == 0 || liste2.length == 0 || liste3.length == 0 || liste4.length == 0){
    return;
  }

  if(waitForStop) return;
  var a = new Audio("https://programmingwiki.de/images/start.mp3"); 
  a.play();

  $(".handle").addClass("clicked");
  setTimeout(function(){$(".handle").removeClass("clicked");},1000);

  target1 = -1;
  target2 = -1;
  target3 = -1;
  target4 = -1;
  if(w == 0 || w == 1) machine1.shuffle();
  if(w == 0 || w == 2) machine2.shuffle();
  if(w == 0 || w == 3) machine3.shuffle();
  if(w == 0 || w == 4) machine4.shuffle();
  waitForStop = true;
  setTimeout(function(){
   machine1.stop();
   machine2.stop();
   machine3.stop();
   machine4.stop();
   setTimeout(function(){ waitForStop = false; },1000);
  },500);
}

$("#slotMachineButtonShuffle").click(function(){start(); newShuffle (0);});
$("#handleBtn").click(function(){
  start(); newShuffle (0);
});

function start(){
if(liste1.length == 0 || liste2.length == 0 || liste3.length == 0 || liste4.length == 0){
  alert("Fülle erst oben die Elemente ein, klicke auf ausführen und dann zieh am Hebel.");
  return;
}

$('#spinners').html('<div id="casino1" class="slotMachine"></div><div id="casino2" class="slotMachine"></div><div id="casino3" class="slotMachine"></div><div id="casino4" class="slotMachine"></div>');
for(var i=0; i < liste1.length; i++)
 $('#casino1').append('<div class="slot slot'+(i+1)+'"><div class="inner">'+liste1[i]+'</div></div>');
for(var i=0; i < liste2.length; i++)
 $('#casino2').append('<div class="slot slot'+(i+1)+'"><div class="inner">'+liste2[i]+'</div></div>');
for(var i=0; i < liste3.length; i++)
 $('#casino3').append('<div class="slot slot'+(i+1)+'"><div class="inner">'+liste3[i]+'</div></div>');
for(var i=0; i < liste4.length; i++)
 $('#casino4').append('<div class="slot slot'+(i+1)+'"><div class="inner">'+liste4[i]+'</div></div>');

machine1 = $("#casino1").slotMachine({
  active  : 0,
  delay : 300,
  randomize : getNextRandom1
});
machine2 = $("#casino2").slotMachine({
  active  : 0,
  delay : 300,
  randomize : getNextRandom2
});
machine3 = $("#casino3").slotMachine({
  active  : 0,
  delay : 300,
  randomize : getNextRandom3
});
machine4 = $("#casino4").slotMachine({
  active  : 0,
  delay : 300,
  randomize : getNextRandom4
});
$("#casino1").on("click",function(){
  newShuffle(1);
});
$("#casino2").on("click",function(){
  newShuffle(2);
});
$("#casino3").on("click",function(){
  newShuffle(3);
});
$("#casino4").on("click",function(){
  newShuffle(4);
});         
}

</script>
</html>