"use strict";
        var next_qnumber = 0;
        
        var selected_color = '#f4fa9c';
        var deselected_color = '#ffffff';

        function del_que(num) {
            var c = confirm("Are you sure you want to delete this question?");
            if(c) {
                var qbunch = document.getElementById('qbunch');
                var q = document.getElementById('question_'+num);
                qbunch.removeChild(q);
            }
        }

        function fillme(obj) {
            if(obj.value!="") {
                obj.style.backgroundColor = "white";
            } else {
                obj.style.backgroundColor =  "#fcb1b1";
            }
        }

        function get_template() {
            var question_template = `<div id="question_`+next_qnumber+`" class="question_card">
                                    <div class="algnrght">
                                    <button type="button" id="del_question" class="del_question" onclick="del_que(`+next_qnumber+`)">Delete this question</button>
                                    </div>
                                    <h3>Question:</h3>
                                    <textarea class="input_area" name="question_`+next_qnumber+`" onchange="fillme(this)"></textarea>
                                    <h3>Options:</h3>
                                    <label class="op_box" id="box0"><span id="lbl_`+next_qnumber+`_0"><strong>A</strong><span role="textbox" id="span_`+next_qnumber+`_option0" contenteditable class="ques_txtara"></span></span></label>
                                    <label class="op_box" id="box1"><span id="lbl_`+next_qnumber+`_1"><strong>B</strong><span role="textbox" id="span_`+next_qnumber+`_option1" contenteditable class="ques_txtara"></span></span></label>
                                    <label class="op_box" id="box2"><span id="lbl_`+next_qnumber+`_2"><strong>C</strong><span role="textbox" id="span_`+next_qnumber+`_option2" contenteditable class="ques_txtara"></span></span></label>
                                    <label class="op_box" id="box3"><span id="lbl_`+next_qnumber+`_3"><strong>D</strong><span role="textbox" id="span_`+next_qnumber+`_option3" contenteditable class="ques_txtara"></span></span></label>
                                    <input type="hidden" id="input_`+next_qnumber+`_option0" name="question_`+next_qnumber+`_option0" value="">
                                    <input type="hidden" id="input_`+next_qnumber+`_option1" name="question_`+next_qnumber+`_option1" value="">
                                    <input type="hidden" id="input_`+next_qnumber+`_option2" name="question_`+next_qnumber+`_option2" value="">
                                    <input type="hidden" id="input_`+next_qnumber+`_option3" name="question_`+next_qnumber+`_option3" value="">
                                    <div class="algncntr">
                                        <h3>Select correct answer:</h3>
                                        <div>
                                            <button type="button" onclick="set_option(`+next_qnumber+`,0)" class="ans_select">A</button>&nbsp;&nbsp;
                                            <button type="button" onclick="set_option(`+next_qnumber+`,1)" class="ans_select">B</button>&nbsp;&nbsp;
                                            <button type="button" onclick="set_option(`+next_qnumber+`,2)" class="ans_select">C</button>&nbsp;&nbsp;
                                            <button type="button" onclick="set_option(`+next_qnumber+`,3)" class="ans_select">D</button>
                                        </div>
                                    </div>
                                    <h3>Marks: </h3>
                                    <input class="marksip" type="text" name="question_`+next_qnumber+`_marks" value="1">
                                    <h3>Negative Marks (No need to enter -ve sign):</h3>
                                    <input class="marksip" type="text" name="question_`+next_qnumber+`_negative" value="0">
                                    <input type="hidden" name="question_`+next_qnumber+`_answer" id="q`+next_qnumber+`" value="NA">
                                    <h3>Explanation (Optional):</h3>
                                    <textarea class="input_area" onchange="fillme(this)" name="question_`+next_qnumber+`_explanation"></textarea>
                                </div>`;
            next_qnumber = next_qnumber + 1;
            return question_template;
        }
        function add_que() {
            var content = get_template();
            $('#qbunch').append(content);
        }

        function set_option( question_id, option_id ) {
    if(typeof question_id == "number" && typeof option_id == "number") {
        if(question_id>=0 && question_id<next_qnumber && option_id>=0 && option_id<4) {
            var ans = document.getElementById('q'+question_id);
            if (ans.value == "NA") {
                ans.value = option_id;
                var cbox = document.getElementById("lbl_"+question_id+"_"+option_id);
                cbox.style.backgroundColor = selected_color;
            } else {
                if(option_id == ans.value) {
                    var obox = document.getElementById("lbl_"+question_id+"_"+ans.value);
                    obox.style.backgroundColor = deselected_color;
                    ans.value = "NA";
                } else {
                    var obox = document.getElementById("lbl_"+question_id+"_"+ans.value);
                    obox.style.backgroundColor = deselected_color;
                    ans.value = option_id;
                    var cbox = document.getElementById("lbl_"+question_id+"_"+option_id);
                    cbox.style.backgroundColor = selected_color;
                }
            }
        }
    }
}

function submit_form() {
    var x = document.getElementsByClassName("question_card");
    for(var i=0; i<x.length; i++) {
        var idss = x.item(i).id.substring(9);
        for(var j=0; j<4; j++) {
            var t = document.getElementById("span_"+idss+"_option"+j).innerText;
            var ipdd = document.getElementById("input_"+idss+"_option"+j);
            ipdd.value = t;
            console.log(t);
        }
    }

    document.getElementById("manual_form").submit();
}