How much time should I have on my phone?

Very generic decision tree tool to help judge much time to spend on one's smart phone. Allows for up to 9 options per group, and 'n' steps. ',productFilter' class to wrap each instance, if you want more than one per page. Option groups for each step must have '.step<n>' class, and an identifier class, e.g.: '.option121'.

by Mike Gifford

HTML

<br>
<br>

<h1>How much time should I have on my phone?</h1>

<br>
<form action="#" id="unique_id" class="productFilter">
    <fieldset class="step1 option0">
        <legend>Do I have homework?</legend>
        <p>
            <input id="question_1" name="group_1" type="radio" value="No" />
            <label for="question_1">No</label>&nbsp;&nbsp;&nbsp;&nbsp;
            <input id="question_2" name="group_1" type="radio" value="Yes" />
            <label for="question_2">Yes</label>
        </p>
    </fieldset>
    <fieldset class="hide step2 option1">
        <legend>No. So, do I have dance/stretch practice?</legend>
        <p>
            <input id="question_1_1" name="group_2" type="radio"  value="No" />
            <label for="question_1_1">No</label>&nbsp;&nbsp;&nbsp;&nbsp;
            <input id="question_1_2" name="group_2" type="radio"  value="Yes" />
            <label for="question_1_2">Yes</label>
        </p>
    </fieldset>
    <fieldset class="hide step2 option2 finished">
        <legend>Yes. OK, this means that:</legend>
        <p>You only have 15 minutes on your phone and then you need to put the phone away and get to your homework (900 secs).</p>
    </fieldset>
    <fieldset class="hide step3 option11">
        <legend>How was your day?</legend>
        <p>
            <input id="question_1_1_1" name="group_4" type="radio" value="Good" />
            <label for="question_1_1_1">Good</label>&nbsp;&nbsp;&nbsp;&nbsp;
            <input id="question_1_1_2" name="group_4" type="radio" value="Crappy" />
            <label for="question_1_1_2">Crappy</label>
        </p>
    </fieldset>
    <fieldset class="hide step3 option12 finished">
        <legend>Yes. So this means that:</legend>
        <p>Take 15 Minutes phone time and then just use your phone for music to dance and stretch to (900 secs).</p>
    </fieldset>
    <fieldset class="hide step3 option111 finished">
        <legend>Great. So this means that:</legend>
        <p>Go ahead and take...

CSS

body {
    font-family:Arial, Verdana;
    font-size:12px;
    background-color: white;
    text-align:center;
}
h1 {
    font-size:18px;
    font-weight:900;
}
legend {
    padding: 0.2em 0.5em;
    border:1px solid green;
    color:green;
    font-size:120%;
    text-align:left;
}
fieldset {
    margin-left:auto;
    margin-right:auto;
    width:90%;
    color: green;
    border: 1px dotted;
    padding:5px;
    overflow:hidden;
}
.hide {
    display:none;
}
.finished {
    margin-left:auto;
    margin-right:auto;
    width:90%;
    color: red;
    background-color: rgba(127, 255, 0, 0.5);
    padding:5px;
}
.finished legend {
    color: red;
    width:90%;
    background-color: rgba(127, 255, 0, 0.8);
}
input {
    padding:4px;
}
input[type="text"] {
    width:50px;
    text-align:center;
}
label {
    font-weight: 800;
}
#countdown {
    margin-left:auto;
    margin-right:auto;
    width:90%;
    background-color:rgba(2, 2, 2, 0.2);
    padding:5px;
    border:solid 1px #e5e5e5;
    text-align:center;
}
#cd_status {
    color: green;
}

JavaScript

var base = {
    productFilterSetup: function () {
        $('.productFilter').each(

        function () {
            var tmp = new base.filterGroup(this);
            tmp.setup();
        });
    },
    filterGroup: function (filter_group) {
        var me = this;
        me.target_element = filter_group;
        me.active_element_index = 0;
        me.setup = function () {
            $(filter_group).find('input[type=radio]').bind('click', function () {
                me.update(this);
            });
        };
        me.update = function (target_radio) {
            var fieldsets = $(me.target_element).find('fieldset'),
                len = fieldsets.length,
                i = 0,
                j = 0,
                radios,
                radios_len,
                options = [],
                options_buffer = '',
                num_of_steps = 0;

            for (i = 1; i <= num_of_steps + 1; i += 1) {
                if ($('fieldset.step' + i).length > 0) {
                    num_of_steps += 1;
                }
            }

            for (i = 0; i < num_of_steps; i += 1) {
                if ($(target_radio).parents('fieldset.step' + (i + 1)).length > 0) {
                    for (j = i; j < num_of_steps; j += 1) {
                        $('fieldset.step' + (j + 2) + ' input[type=radio]').attr('checked', false);
                    }
                }
            }

            for (i = 0; i < len; i += 1) {
                radios = $(fieldsets[i]).find('input[type=radio]');
                radios_len = radios.length;
                for (j = 0; j < radios_len; j += 1) {
                    if ($(radios[j]).is(':checked')) {
                        options.push(j + 1);
                    }
                }
            }
            fieldsets.addClass('hide');
            $('fieldset.option0').removeClass('hide');
            for (i = 0; i < options.length; i += 1) {
                options_buffer += options[i];
               ...