Future major features

Simplify activity chooser

 
Picture of stefan weber
Re: Simplify activity chooser
Plugin developers

This is an excellent idea, and I totally agree that the disctinction between activities and resources only serves to confuse teachers.

However, I think the main problem of the activity chooser is that it only uses a tiny part of the screen. Once you fix that, you do won't even need complicated solutions like a personal favourite system, because teachers will just see all activities instantly.

I made a quick fix using CSS for our site yesterday, and we are very happy with the result:


Its big, colourful, and shows all the important information at once. We are in the process of re-writing the activity descriptions at our site to further aid teachers in picking the right tool for the job.

In addition to formatting the chooser via CSS, I also modified the modchooser.php in /moodle/course/classes/output to make a distinction between favourite and non-favourite items. Unlike Rex' idea, this does not allow for teachers to pick their own favourites, but since they see all possible activities at once on a normal screen without scrolling this is not really needed.

My next project will be to do the same thing for the question chooser list, which is just as badly designed as the current default activity chooser.


If you want to implement our solution at your site, this is how to do it:


Above solution uses this as additional CSS in Boost:

//activity chooser that doesn't suck

.moodle-has-zindex.chooserdialogue-course-modchooser.yui3-widget.yui3-panel.moodle-dialogue.yui3-widget-positioned.yui3-widget-modal.yui3-widget-stacked.chooserdialogue.yui3-dd-draggable.moodle-dialogue-focused {left: 5vw !important; top: 10vh !important; width: 90vw !important; }

.moodle-dialogue-hd.yui3-widget-hd {text-align: center;}

.instruction, .typesummary {width: 50% !important; left: 50% !important; height: 70vh !important;}

.alloptions {width: 50% !important; max-width: 50% !important; height: 70vh !important; display: flex; flex-flow: row wrap; align-content: flex-start; align-content: flex-start; padding: 15px;}

.moduletypetitle {width: 100%; text-align: center; font-weight: bold;}

.jschooser .choosercontainer #chooseform .alloptions .option input[type=radio] {display: none;}

.choosercontainer #chooseform .option {height: 100px; width: 120px; padding: 0px; text-align: center; font-size: small;}

.choosercontainer #chooseform .option .icon {height: 50px; width: 50px;}

.choosercontainer #chooseform .option label {border-bottom: 0px;}

.choosercontainer #chooseform .selected {margin-top: 0px;}

.typesummary {text-align: left; font-weight: normal; font-size: small;}

.jschooser .choosercontainer #chooseform .alloptions .option .typename {width: 100%;}

.typename {font-size: small; margin-top: 3px;}

.moduletypetitle {padding-top: 5px !important; padding-bottom: 0px !important; zoom: 1.5; text-transform: none !important;}


/moodle/course/classes/output/modchooser.php has been edited like this:

(please excuse the awkward php, im not very good at it - it's not elegant but it works smile

         // Activities.
        $activities = array_filter($modules, function($mod) {
            return (
		$mod->name == 'assign' ||
            	$mod->name == 'checkmark' ||
            	$mod->name == 'choice' ||
            	$mod->name == 'choicegroup' ||
            	$mod->name == 'feedback' ||
            	$mod->name == 'folder' ||
            	$mod->name == 'forum' ||
            	$mod->name == 'label' ||
            	$mod->name == 'quiz' ||
            	$mod->name == 'resource' ||
            	$mod->name == 'url' ||
            	$mod->name == 'wiki'
		);
        });
        if (count($activities)) {
            $sections[] = new chooser_section('activities', new lang_string('favmods'),
                array_map(function($module) use ($context) {
                    return new modchooser_item($module, $context);
                }, $activities)
            );
        }

        $resources = array_filter($modules, function($mod) {
            return (
		$mod->name !== 'assign' &&
            	$mod->name !== 'checkmark' &&
            	$mod->name !== 'choice' &&
            	$mod->name !== 'choicegroup' &&
            	$mod->name !== 'feedback' &&
            	$mod->name !== 'folder' &&
            	$mod->name !== 'forum' &&
            	$mod->name !== 'label' &&
            	$mod->name !== 'quiz' &&
            	$mod->name !== 'resource' &&
            	$mod->name !== 'url' &&
            	$mod->name !== 'wiki'
		);
        });
        if (count($resources)) {
            $sections[] = new chooser_section('resources', new lang_string('restmods'),
                array_map(function($module) use ($context) {
                    return new modchooser_item($module, $context);
                }, $resources)
            );
        }

 
Average of ratings: Useful (5)