Suggester Demo

HTML

<body>
    <button id="suggest">suggest</button><button id="suggestReverse">suggest in reverse mode</button>
    <table id="table">
        <tr id="tdContainer"></tr>
    </table>
    <div id="randomPointContainer">
        <div id="randomPoint"></div>
    </div>
    
    <div>Random result: <span id="randomResult"></span></div>
    <div>Suggester result: <span id="result"></span></div>
    
    <table id="resultCounter">
        <thead>
            <tr>
                <th>ID</th>
                <th>count</th>
                <th>%</th>
                <th>score</th>
            </tr>
        </thead>
        <tbody id="resultCounterContainer"></tbody>
    </table>
    <button id="resetCounterTable">reset</button>
</body>

CSS

#table {
    width: 100%;
    border-spacing: 0;
    margin-top: 10px;
}

td {
    border-right: 1px solid grey;
    border-bottom: 1px solid grey;
    text-align: center;
}

td:last-child {
    border-right: none;
}

#randomPointContainer {
    margin-left: -4px;
    margin-right: 4px;
}

#randomPoint {
    position: relative;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 4px 16px 4px;
    border-color: transparent transparent red transparent;
}

JavaScript

// Собственно, исходные данные
var items = [
    {id: 1, score: 1},
    {id: 2, score: 1},
    {id: 3, score: 0},
    {id: 4},
    {id: 5, score: 1}
]

var d = document
var getId = function (id) {
    return d.getElementById(id)
}

var randomResult,
    sumScores = 0,
    sumWeights = 0,
    suggestedItem,
    suggestedItemIndex
 /**
 Метод инициализации. Вызывается однажды запуская первое стандартное предложение (suggest)
 */
var initialize = function () {
    // добавляем обработчики кнопкам
    getId('suggest').addEventListener('click', suggestHandler)
    getId('suggestReverse').addEventListener('click', suggestReverseHandler)
    getId('resetCounterTable').addEventListener('click', renderResultCounterTable)
    
    correctInitialData()
    
    renderResultCounterTable()
    
    suggestHandler()
}
 /**
 Метод рендеринга таблицы результатов. 
 Вызывается однажды при инициализации и при очистке таблицы (reset)
 */
var renderResultCounterTable = function () {
   getId('resultCounterContainer').innerHTML = ''
    for (var i = 0; i < items.length; i++) {
        var item = items[i]
        var tr = d.createElement('tr')
        
        var td = d.createElement('td')
        td.innerHTML = item.id
        tr.appendChild(td)
        
        tr.appendChild(d.createElement('td'))
        tr.appendChild(d.createElement('td'))
        tr.appendChild(d.createElement('td'))
        
        getId('resultCounterContainer').appendChild(tr)
    }
    var trSum = d.createElement('tr')
    var thSum = d.createElement('th')
    thSum.innerHTML = items.length
    trSum.appendChild(thSum)
    
    trSum.appendChild(d.createElement('th'))
    
    thSum = d.createElement('th')
    thSum.innerHTML = '100'
    trSum.appendChild(thSum)
    
    getId('resultCounterContainer').appendChild(trSum)
}

/**
Метод обновления и пересчёта таблицы результатов
*/
var updateCounterTable = function () {
    // обновляем общую сумму запусков метода
    var resultCounterContainer =...