Umbrella task.
Description
Details
Subject | Repo | Branch | Lines +/- | |
---|---|---|---|---|
Add Css classes in quiz extension to provide flexibility | mediawiki/extensions/Quiz | master | +13 -6 |
Status | Subtype | Assigned | Task | ||
---|---|---|---|---|---|
Open | None | T148624 Quiz extension should provide more flexibility regarding style (css): Numerated questions; columns for answers | |||
Resolved | Harjotsingh | T159952 Only show feedback for proposals that have been attempted using CSS | |||
Open | None | T170800 Add ability to put answers into columns | |||
Open | None | T170852 Be able to hide/show numbers and apply style to numbers in Quiz |
Event Timeline
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"
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
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
I looked for various options to implement, following are my observations ( will be a long comment :P)
- 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.
- 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.
- 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 -
With class=number -
Thanks !
Change 365450 abandoned by Mvolz:
Add Css classes in quiz extension to provide flexibility
Reason:
We decided not to go this route.
https://www.mediawiki.org/wiki/Help:TemplateStyles is now deployed on wikiversity, which might resolve this issue.