User:PetraMagna/story.js

(function() {
    
    // specifies what to do after the user clicks on a sensei reply option
    function story_option_click(group_num, option_num) {
        const container = $("#story-sensei-option-group-" + group_num);
        container.children('.story-reply-option').each(function(num, option) {
			const index = num + 1;
            // note that addClass and removeClass become nop if the corresponding jquery objects don't exist
            // highlight selected option
            if (index === option_num) {
                $(option).addClass("story-selected-option");
            } else {
                $(option).removeClass("story-selected-option");
            }
            // hide student text corresponding to the options that are not selected
            $(".story-student-option-" + group_num + "-" + index).each(function(i, student_reply) {
            	if (index === option_num) {
            		$(student_reply).removeClass("story-hidden-student-text");
            	} else {
            		$(student_reply).addClass("story-hidden-student-text");
            	}
            });
        });
        
    }
    
    function story_init() {
        $(".story-reply-container").each(function(i, container) {
        	// skip containers without an id
            const container_id = container.id;
            if (container_id == null) {
            	return;
            }
            // extract group number from the id
            const container_id_split = container_id.split("-");
            const group_num = container_id_split[container_id_split.length - 1];
            // register onclick function for each option
            $(container).children('.story-reply-option').each(function(option_num, option) {
                option.onclick = function() {
                    story_option_click(group_num, option_num + 1);
                };
                // by default, the first reply option is selected
                if (option_num === 0) {
                	option.click();
                }
            });
        });
    }
    
    story_init();
})();