Main Page

This is a demo site for mw:Extension:Monstranto. If you want to test you can log in using your Wikimedia account. Please note that as a test site it is possible things could be deleted without notice. This is an early proof of concept and much more is needed to be done. Most notably "require" doesn't work right.

The idea is to give users the ability to create rich experiences. Think scribunto for images. For rationale, see https://www.mediawiki.org/wiki/User:Bawolff/Interactive_rich_media & https://www.mediawiki.org/wiki/User:Bawolff/Reflections_on_graphs

Circle

Press the play icon and then click on the circle, it will change colour

This is generated by the following code in Module:Circle:

local p = {}

-- Invoked in page the normal {{#invoke:... way
function p.circle( frame )
   local svg = mw.html.create( 'svg' )
       :attr{ xmlns = 'http://www.w3.org/2000/svg', width = '150', height = '150' }
       :tag( 'circle' )
       :attr{ cx = "50", cy = "50", r = "40", stroke = "black", ["stroke-width"] = "3", fill = "red", id = "c1", style = "transition: fill 0.3s ease; cursor:pointer" }
       :allDone()
       
   return mw.ext.monstranto.addIllustration{
		svgText = tostring(svg),
		activationCallback = { "Circle", "activate" }
   }
end

-- Called when the user clicks play
function p.activate(svg, args)
	return svg:getElementById( 'c1' ):addEventListener( "click", p.changeColour )
end

-- Called when user clicks on the circle
function p.changeColour( element, event )
  local colours = { "red", "yellow", "blue", "green", "orange", "pink" }
  local index = math.floor(math.random()*(#colours) + 1)
  element:setAttribute( "fill", colours[index] )
end

return p