randomness color matches

true false combinations with some logic

by dimshik

HTML

<h2>Random color matches generator</h2>

Original Colors
<div class="original"></div>

<!-- Dissordered Colors 
<div class="out"></div>

Almost Final Colors
<div class="almost-fin"></div>
-->

Maximum Number Of False Answers
<div class="false-answers"></div>

Final Colors
<div class="fin"></div>

CSS

body {
    font-family: arial;
    font-size: 14px;
}

ol li{
    margin-bottom: 5px;
}

.hex {
    color:white;
    font-size:12px;
}
.true {
    border-left: 4px solid green;
}
.false {
    border-left: 4px solid red;
}

JavaScript

var colors = [{
    'name': 'blue',
    'hex': '#375FFF'
}, {
    'name': 'red',
    'hex': '#FF3221'
}, {
    'name': 'green',
    'hex': '#3EDD46'
}, {
    'name': 'pink',
    'hex': '#E434FF'
}, {
    'name': 'orange',
    'hex': '#FF8C00'
}, {
    'name': 'purple',
    'hex': '#A100FF'
}, {
    'name': 'brown',
    'hex': '#7F412A'
}, {
    'name': 'yellow',
    'hex': '#FFDC00'
}, {
    'name': 'cyan',
    'hex': '#2FDBFF'
}];

// helper function
Array.prototype.completeDisorder = function () {
    var i, j, tmp;
    for (i = 0; i < this.length - 1; i++) {
        j = i + 1 + Math.floor((this.length - i - 1) * Math.random());
        tmp = this[j];
        this[j] = this[i];
        this[i] = tmp;
    }
    return this;
};

/*
 * Returns a random integer between min (inclusive) and max (inclusive)
 * Using Math.round() will give you a non-uniform distribution!
 */
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

// helper function
function printColors(colorsArray) {
    var html = '<ol>';
    for (i = 0; i < colorsArray.length; i++) {
        html += '<li><span class="name">' + colorsArray[i].name + '</span>: <span class="hex" style="background-color:' + colorsArray[i].hex + '";height:15px;>' + colorsArray[i].hex + '</span></li>';
    }
    html += '</ol>'
    return html;
}


//currentIndex = number of elements to shuffle
function shuffle(array, currentIndex) {
    var temporaryValue;
    var randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {

        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex].hex;
        array[currentIndex].hex = array[randomIndex].hex;
        array[randomIndex].hex = temporaryValue;
    }

    return array;
}


function markFalseAnswers(finalArray) {

    var...