Page MenuHomePhabricator

Quiz extension should provide more flexibility regarding style (css): Numerated questions; columns for answers
Open, MediumPublic

Description

Umbrella task.

Event Timeline

Mvolz renamed this task from The quizz should provide more flexibility regarding style (css) to Quiz extension should provide more flexibility regarding style (css).Oct 19 2016, 11:57 AM
Aklapper renamed this task from Quiz extension should provide more flexibility regarding style (css) to Quiz extension should provide more flexibility regarding style (css): Numerated questions; columns for answers.Oct 19 2016, 12:53 PM
Mvolz triaged this task as Medium priority.Jun 19 2017, 8:47 AM

Any thoughts how to implement this?

Maybe have a "style" property i.e.

<quiz style="">

The complication is that usually the style tag applies to an element, in this case we'd want to apply it to different elements, more like a CSS file, rather than a style tag.

Maybe look into using https://www.mediawiki.org/wiki/Extension:CSS? Might allow us to just put one at the top of a page and use that for all the quizzes in the page. As long as we provide the correct classes in the quiz, that might be the way to do it.

Hmm, but it's not installed on en wikiversity: https://en.wikiversity.org/wiki/Special:Version

Still maybe worth looking into seeing if it's stable enough/plausible or just looking at the code and see if we can use the principle to introduce CSS files on a per quiz basis instead.

Would it be possible to set up something like the table classes ?

{| class="wikitable"

Would it be possible to set up something like the table classes ?

{| class="wikitable"

Yes, that sounds like a good place to look.

Or maybe allow linking to an external stylesheet?

Linking to external stylesheet can be done, but where would the stylesheet be hosted ?

Also we'll have to make sure that the stylesheet doesn't provide a way to override the existing style.Someone can exploit it by adding styles that alter the page.
Ex

body {
    background-color: lightblue;
}

We can provide style attribute to each individual quiz i.e <quiz style="different_style_options" >.A person can select from predefined style options for which the css is already defined.

T165387 can be done by providing colors inside the style attribute, these color will then be used over the default color scheme.
Ex-

<quiz style="colors:#1FF72D,#F74245,#F9F9F9,#2834FF,#D700D7;other_style_options" >

// Here each property is separated by ; while multiple values are separated by ,

A defined markup will be needed.

You can create .css pages in mediawiki, i.e.
https://en.wikipedia.org/wiki/MediaWiki:Common.css

Although I think people would probably use a subset of their own page for
it. i.e. https://en.wikiversity.org/wiki/My_Page/quiz.css

You can create .css pages in mediawiki, i.e.
https://en.wikipedia.org/wiki/MediaWiki:Common.css

Although I think people would probably use a subset of their own page for
it. i.e. https://en.wikiversity.org/wiki/My_Page/quiz.css

Can only the CSS downloaded or embedded ?
Currently the CSS is inside the wikipage, which makes it difficult to embed directly.
I tried using file_get_contents() on the link but it still contains the HTML of the webpage.

Change 365450 had a related patch set uploaded (by Harjotsingh; owner: Harjotsingh):
[mediawiki/extensions/Quiz@master] Add Css classes in quiz extension to provide flexibility

https://gerrit.wikimedia.org/r/365450

I looked for various options to implement, following are my observations ( will be a long comment :P)

  1. Class=Wikitable is achieved by having wikitable css defined inside shared.css.Shared.css is common for mediawiki, so it would not be efficient to add quiz extension related css into the file.
  2. Common.css can be used to set css to the wikipage.Manual:Stylesheets defines how different common.css works.MediaWiki:Common.css needs Sysops permissions for changing.Also common.css would not be quiz specific as it applies to all wiki on the domain.Other way to use common.css is User:Example/common.css, but this can be achieved if the quiz is hosted only on the user creating it.
  3. Extension - CSS can be used to link to external stylesheets without having any user dependencies.It is better option than the previous two.Although it would require to install the extension on Wikiversity, but it would solve flexible css problem.Also this wouldn't require any changes to quiz extension as CSS Extension itself can modify the pages and is independent.Example of using CSS extension with quiz :
{{#css:linkToSomeCss}}
<quiz >
 //quiz code goes inside this section
</quiz>

Another way would be to have global variable Class for each quiz.Classes can be separated by using " ; ". Array_key_exists( 'class', $argv ) can be used to find all the classes provided to the quiz by using explode function .
This would work for predefined classes.

Example :

//Syntax for quiz
<quiz class="nofeedback;number" >
//quiz code
</quiz>

//Code in quiz.class.php
$classes = array_key_exists( 'class', $argv ) ? $argv['class'] : '' ;
$class = explode(';', $classes);
foreach( $class as $val){
  $isClass[$val]=1;          // setting the value for the class to be true
} 


//Then individual code components can be added in different sections if class['classname'] is true.

I've made a change using class="number" to display question number even if only 1 question is in quiz(T162803).
I haven't added tests as this is a experimental patch and needs consent.

Screenshots : -
Without class=number -

cssfin1.jpg (289×1 px, 60 KB)

With class=number -

cssfin2.jpg (214×1 px, 42 KB)

Thanks !

Change 365450 abandoned by Mvolz:
Add Css classes in quiz extension to provide flexibility

Reason:
We decided not to go this route.

https://gerrit.wikimedia.org/r/365450

Mvolz added a subscriber: Harjotsingh.

https://www.mediawiki.org/wiki/Help:TemplateStyles is now deployed on wikiversity, which might resolve this issue.