Welcome, Guest
Username: Password: Remember me

TOPIC: For accessibility : Font Resize widget or plugin

For accessibility : Font Resize widget or plugin 3 months 6 days ago #111005

  • Dyane
  • Dyane's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 2
  • Karma: 0
For accessibility purposes, we would need to offer to the person filing out the survey online the possibility to increase the font.

We use a widget (wpTextResize) for this purpose on our wordpress site. Is there something similar for limesurvey ?

Is there anyway to integrate this fonctionality in future versions of LimeSurvey ? Thank you.
The administrator has disabled public write access.

For accessibility : Font Resize widget or plugin 3 months 6 days ago #111012

  • Ben_V
  • Ben_V's Avatar
  • OFFLINE
  • Platinum Lime
  • Posts: 1122
  • Thank you received: 255
  • Karma: 79
Hello,
you can use javascript for this... A simple working code is available here
(read carefully the notice because the function is targeted for <p> element and you maybe have to adapt it)
.
Benoît

goo.gl/Bw5iM => Recherche GG dans le forum français (remplacer "exemple" dans la barre de recherche)
goo.gl/WX8PH => GG search for english forum (Replace "example" in the search bar)
goo.gl/IxiGu => Búsqueda en el foro en español (Cambiar "ejemplo" en la barra de...
The administrator has disabled public write access.

For accessibility : Font Resize widget or plugin 3 months 6 days ago #111013

  • Dyane
  • Dyane's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 2
  • Karma: 0
Merci Benoît !

I'm at lost to where to paste the code, and where to paste the + - links in my survey model.

Would you have the time to provide me with more explanation ?

I am nil in coding that's why I'm looking for a widget/plugin or built-in function for LimeSurvey.

Thank you :-)
The administrator has disabled public write access.

For accessibility : Font Resize widget or plugin 3 months 6 days ago #111018

  • Ben_V
  • Ben_V's Avatar
  • OFFLINE
  • Platinum Lime
  • Posts: 1122
  • Thank you received: 255
  • Karma: 79
there is no related plugin (for the moment)... but implementing this function into your template won't be too difficult...
To make it easy, use the template editor to implement those few changes:

1) at the end of the template.js file paste:
 /* Source: www.white-hat-web-design.co.uk/blog/controlling-font-size-with-javascript/ */
	var min=8; var max=22;
	function increaseFontSize() {
		var p = document.getElementsByTagName('p'); 
		for(i=0;i<p.length;i++) {   if(p[i].style.fontSize) { var s = parseInt(p[i].style.fontSize.replace("px","")); }
		else {   var s = 12; } if(s!=max) {   s += 1; } p[i].style.fontSize = s+"px"   }
	}
	function decreaseFontSize() {
		var p = document.getElementsByTagName('p');
		for(i=0;i<p.length;i++) {   if(p[i].style.fontSize) { var s = parseInt(p[i].style.fontSize.replace("px","")); }
		else {   var s = 12; } if(s!=min) {   s -= 1; } p[i].style.fontSize = s+"px"   } 
	}

Note that you can adapt:
  • line #1: min & max font-size
  • line #3 & #8: you can change <p> by <body> or <form>

2) Paste the +/- links where you need they appear, but one of the best place will be in the startpage.pstpl file:
<div id="adjustfontsize">
Font size: <a href="javascript:decreaseFontSize();">-</a><a href="javascript:increaseFontSize();">+</a> 
</div>

Tips:
  • You can use [+] [-] images instead text because <img> elements won't be affected by font-size changes
  • Wrap the links in a div (#adjustfontsize), allowing style changes directly in your template.css file...
    In this case, code to add at the end of your template.css file:
    #adjustfontsize {}
    #adjustfontsize a {}
    #adjustfontsize img {}

I attach you a html sample file if it can help you :)

File Attachment:

File Name: font-size.html.zip
File Size: 2 KB
Benoît

goo.gl/Bw5iM => Recherche GG dans le forum français (remplacer "exemple" dans la barre de recherche)
goo.gl/WX8PH => GG search for english forum (Replace "example" in the search bar)
goo.gl/IxiGu => Búsqueda en el foro en español (Cambiar "ejemplo" en la barra de...
Last Edit: 3 months 6 days ago by Ben_V.
The administrator has disabled public write access.
Time to create page: 0.279 seconds
Donation Image