python_all_function

by JoeQuery

HTML

<button id="run">Run Visualization</button>

<div id="example">
    <div class="expression">
        all([<span id="thelist"></span>])
        <span class="equals">&rArr;</span>
        <span class="answer"></span>
    </div>
    <table id="truthtable" border="1" cellpadding="5">
        <thead>
            <tr>
                <th>x</th>
                <th>bool(x)</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

CSS

body{
    background-color: #eee;
    font-size: 21px;
    font-family: 'Lucida Console';
    height: 200px;
}

.elem{
    display: none;
}

.bool{
    display: none;
}

span.equals{
    display: none
}

span.answer{
    display: none;
}

.active{
    color: #ff0000;
}
#run{
    display: block;
    margin-bottom: 20px;
}

#truthtable{
    margin-top: 20px;
    border: 1px solid #000000;
}

JavaScript

$(function(){
    var pretty_bool_mapping = {
        true: 'True',
        false: 'False'
    };
    var list_mappings = [
        {
            'elements': [1,2,3,4],
            'bools': [true, true, true, true],
            'answer': 'True'
        }
    ];
    var new_tr_html = function(map, element_index){
        var element = map.elements[element_index];
        var raw_bool = map.bools[element_index];
        var pretty_bool = pretty_bool_mapping[raw_bool];
        
        var html_str = "<tr>";
        html_str += "<td class='elem'>" + element + "</td>";
        html_str += "<td class='bool'>" + pretty_bool + "</td>";
        html_str += "</tr>";
        
        return html_str;
    };
    var get_current_tbody = function(){
        return $("#truthtable tbody").html();    
    };
    
    var animate_list_mapping = function(list_mapping){
        var elements = list_mapping.elements;
        var elements_spans = [];
        for(var i=0; i<elements.length; i++){
            elements_spans.push('<span class="val">' + elements[i] + '</span>');
        }

        var elements_str = elements_spans.join(',');
        $("#thelist").html(elements_str);
        for(var i=0; i<elements.length; i++){
            $("#truthtable tbody").html(get_current_tbody() + new_tr_html(list_mapping, i));
        }
        
        var $tbody_rows = $("#truthtable tbody tr");
        var animation_time_per_row = 5000;
        $tbody_rows.each(function(){
            var i = $(this).index();
            var $elem = $(this).find('.elem');
            var $bool = $(this).find('.bool');
            setTimeout(function(){
                    $('.val').removeClass('active');
                    $('.val').eq(i).addClass('active');
                    $elem.delay(1500).fadeIn(500);  
                    $bool.delay(3000).fadeIn(500);
                }, animation_time_per_row*i
            );
        });
        
        var total_row_animation_time = animation_time_per_row *...