Page History

<script>
    $(function () {

        var boxes = $("[class*='articleList']");
        var questions2 = $('div[class=q_depth2]');
        var questions3 = $('div[class=q_depth3]');

        for (var i = 0; i < boxes.length; i++) {
            boxes[i].style.display = "none";
        }

        for (var j = 0; j < questions2.length; j++) {
            questions2[j].style.display = "none";
        }

        for (var r = 0; r < questions3.length; r++) {
            questions3[r].style.display = "none";
        }

    });

    function select_depth1(value) {
        var dataIndex = value;
        var depth2;
        var q_depth2_list = document.getElementsByClassName('q_depth2');
        var q_depth3_list = document.getElementsByClassName('q_depth3');

        $("input:radio[name*='q_depth2']").prop('checked', false);
        $("input:radio[name*='q_depth3']").prop('checked', false);

        for (var i = 0; i < q_depth2_list.length; i++) {
            q_depth2_list[i].style.display = "none";
        }
        for (var j = 0; j < q_depth3_list.length; j++) {
            q_depth3_list[j].style.display = "none";
        }
        $('#raiseTicket_div').css("display", "none");

        var boxes = $("[class*='articleList']");
        for (var i = 0; i < boxes.length; i++) {
            boxes[i].style.display = "none";
        }

        if (dataIndex == 0 | dataIndex == 1) {

            depth2 = document.getElementById('div_q_depth2_1');
            depth2.style.display = '';
        }
        else if (dataIndex == 2) {
            depth2 = document.getElementById('div_q_depth2_2');
            depth2.style.display = '';
        }
        else {
            depth2 = document.getElementById('div_q_depth2_3');
            depth2.style.display = '';
        }
    }

    function select_depth2(value) {
        var dataIndex = value;
        var depth1_value = $('input[name=q_depth1]:checked').val();
        var open_articleList;

        var boxes = $("[class*='articleList']");

        for (var i = 0; i < boxes.length; i++) {
            boxes[i].style.display = "none";
        }

        var q_depth3_list = document.getElementsByClassName('q_depth3');
        for (var j = 0; j < q_depth3_list.length; j++) {
            q_depth3_list[j].style.display = "none";
        }

		$("input:radio[name*='q_depth3']").prop('checked', false);

        $('#raiseTicket_div').css("display", "none");
 
       if (depth1_value == 2 & dataIndex == 1) {
            var depth3 = document.getElementById('div_q_depth3_1');
            depth3.style.display = '';

        } else {
            var list_num = depth1_value + '' + dataIndex;
            open_articleList = document.getElementsByClassName('articleList_' + list_num);

            open_articleList[0].style.display = '';
            $('#raiseTicket_div').css("display", "");
        }

    }

    function select_depth3(value) {
        var dataIndex = value;
        var depth1_value = $('input[name=q_depth1]:checked').val();
        var depth2_value = $('input[name=q_depth2_2]:checked').val();

        var depth3 = depth1_value + '' + depth2_value;

        var open_articleList;

        var boxes = $("[class*='articleList']");
        for (var i = 0; i < boxes.length; i++) {
            boxes[i].style.display = "none";
        }

        open_articleList = document.getElementsByClassName('articleList_' + depth3 + '' + dataIndex);
        open_articleList[0].style.display = '';

        $('#raiseTicket_div').css("display", "");

    }

</script>

<style>
    .radioLabel_dpt1 {
        font-size: 10.5pt;
        line-height: 1.8;
    }

    .radioLabel_dpt2 {
        font-size: 10.5pt;
        line-height: 1.8;
    }

    .radioLabel_dpt3 {
        font-size: 10.5pt;
        line-height: 1.8;
    }

    .q_depth1 {
        background-color: rgb(242, 242, 242, 1);
        padding: 15px;
    }

    .q_depth2 {
        background-color: rgb(242, 242, 242, 1);
        padding: 15px;
        margin-top: 5px;
    }

    .q_depth3 {
        background-color: rgb(242, 242, 242, 1);
        padding: 15px;
        margin-top: 5px;
    }

    div[class*='articleList'] {
        border-left: 5px solid rgb(100, 150, 100, 1);
        background-color: rgb(200, 220, 200, 0.2);
        margin-top: 5px;
    }

    #raiseTicket_div {
        background-color: rgb(250, 250, 250, 0.2);
		border: 1px solid rgb(225, 225, 225, 1);
        padding: 15px;
        margin-top: 15px;
    }

</style>



<div class="q_depth1">
    <span style="font-size: 14pt; font-weight: bold;">Q1. Select a problem type you have</span><br>
    <input type="radio" id="q_detph1_0" name="q_depth1" value="0" onclick="select_depth1(this.value)">
    <label class="radioLabel_dpt1" for="q_detph1_0">A device feature does not work</label><br>
    <input type="radio" id="q_depth1_1" name="q_depth1" value="1" onclick="select_depth1(this.value)">
    <label class="radioLabel_dpt1" for="q_depth1_1">Device operates abnormally</label><br>
    <input type="radio" id="q_depth1_2" name="q_depth1" value="2" onclick="select_depth1(this.value)">
    <label class="radioLabel_dpt1" for="q_depth1_2">Device cannot connect wireless communication (network, BT,
        etc.)</label><br>
    <input type="radio" id="q_depth1_3" name="q_depth1" value="3" onclick="select_depth1(this.value)">
    <label class="radioLabel_dpt1" for="q_depth1_3">Device have a power-related problem</label>
</div>

<div class="q_depth2" id="div_q_depth2_1">
    <span style="font-size: 14pt; font-weight: bold;">Q2. What feature has a problem?</span><br>
    <input type="radio" id="q_detph21_0" name="q_depth2_1" value="0" onclick="select_depth2(this.value)">
    <label class="radioLabel_dpt2" for="q_detph21_0">System features</label><br>
    <input type="radio" id="q_depth21_1" name="q_depth2_1" value="1" onclick="select_depth2(this.value)">
    <label class="radioLabel_dpt2" for="q_depth21_1">Other features & App features</label><br>
    <input type="radio" id="q_depth21_2" name="q_depth2_1" value="2" onclick="select_depth2(this.value)">
    <label class="radioLabel_dpt2" for="q_depth21_2">Scanner</label><br>
    <input type="radio" id="q_depth21_3" name="q_depth2_1" value="3" onclick="select_depth2(this.value)">
    <label class="radioLabel_dpt2" for="q_depth21_3">Keypad</label>
</div>

<div class="q_depth2" id="div_q_depth2_2">
    <span style="font-size: 14pt; font-weight: bold;">Q2. What feature has a problem?</span><br>
    <input type="radio" id="q_detph22_0" name="q_depth2_2" value="0" onclick="select_depth2(this.value)">
    <label class="radioLabel_dpt2" for="q_detph22_0">Newtork (Wi-Fi, LTE...)</label><br>
    <input type="radio" id="q_depth22_1" name="q_depth2_2" value="1" onclick="select_depth2(this.value)">
    <label class="radioLabel_dpt2" for="q_depth22_1">Bluetooth</label><br>
    <input type="radio" id="q_depth22_2" name="q_depth2_2" value="2" onclick="select_depth2(this.value)">
    <label class="radioLabel_dpt2" for="q_depth22_2">NFC</label><br>
    <input type="radio" id="q_depth22_3" name="q_depth2_2" value="3" onclick="select_depth2(this.value)">
    <label class="radioLabel_dpt2" for="q_depth22_3">RFID</label>
</div>

<div class="q_depth2" id="div_q_depth2_3">
    <span style="font-size: 14pt; font-weight: bold;">Q2. What kind of model you use?</span><br>
    <input type="radio" id="q_detph23_0" name="q_depth2_3" value="0" onclick="select_depth2(this.value)">
    <label class="radioLabel_dpt2" for="q_detph23_0">Android device</label><br>
    <input type="radio" id="q_depth23_1" name="q_depth2_3" value="1" onclick="select_depth2(this.value)">
    <label class="radioLabel_dpt2" for="q_depth23_1">Bluetooth scanner</label><br>
    <input type="radio" id="q_depth23_2" name="q_depth2_3" value="2" onclick="select_depth2(this.value)">
    <label class="radioLabel_dpt2" for="q_depth23_2">RFID reader</label>
	<input type="radio" id="q_depth23_3" name="q_depth2_3" value="3" onclick="select_depth2(this.value)">
    <label class="radioLabel_dpt2" for="q_depth23_2">Legacy Model</label>
</div>


<div class="q_depth3" id="div_q_depth3_1">
    <span style="font-size: 14pt; font-weight: bold;">Q3. What kind of model you use?</span><br>
    <input type="radio" id="q_detph3_0" name="q_depth3" value="0" onclick="select_depth3(this.value)">
    <label class="radioLabel_dpt3" for="q_detph3_0">Android device</label><br>
    <input type="radio" id="q_depth3_1" name="q_depth3" value="1" onclick="select_depth3(this.value)">
    <label class="radioLabel_dpt3" for="q_depth3_1">Bluetooth scanner</label><br>
    <input type="radio" id="q_depth3_2" name="q_depth3" value="2" onclick="select_depth3(this.value)">
    <label class="radioLabel_dpt3" for="q_depth3_2">RFID reader</label>
</div>
<br>