Change Question slide font colour with Javascript

[alexanderf10450426]

Hi all,

I have been trying to figure this out for a couple of days and am about to give up, so you are my last hope.

I have built a quiz, with 4 slides, each loading a random question slide from a bank of 4 question pools (each with 4 slides, making 16 slides that can be randomly loaded)

On the quiz slides I cannot set states for the answers to change the font colour dynamically.

I have been asked to add accessibility to the quiz for people with different needs, I can simply change everything to high contrast black and white, with a large simple font. But they want to give the students the opportunity to change the font colour to their preference.

Any suggestions?

Kind regards,

Mark

[Stagprime]

I think if you want to control the text color with JavaScript that you will need to also control the text itself with JavaScript.

In other words - do not use Captivate to place the text. Unfortunately, you lose the easy formatting tools.

Instead, create an empty and transparent smartShape - say we name it  "box"

document.getElementById("box").innerHTML="Good Morning";

document.getElementById("box").style.color="red";

.

The first line will place the text and the second will set the color of the text.

I feel it should be simpler than this but this is all I have to offer at the moment.

Quiz slides behave differently so I admit I am not sure how well this will work for you but it does work on a standard slide.

[alexanderf10450426]

Thank you for your response 🙂

Unfortunately the quizzes will have to be developed far too frequently and with far too many question slides to make any manual development practical enough.

I am publishing as HTML5 btw,  and looking in the CPLibraryAll, I found the ID labelled " .mcqanswercontainer ". Presmuably this would be the container DIV within which the answers would sit,  I wonder if it could be targeted to change the size of all nested DIVs?

Also just to note, that these quiz modules only need 1 font style/size, so even just changing all the text uniformly with some kind of CSS Important! rule would resolve this, if possible.

I did find the following code, for which I set the font size to 30pt to make absolutely sure whether it was working or not; but it didn't even change the size of the text in a standard caption that I placed on a mock slide at the beginning, is there any way to make this work within Captivate?...

// iterate over the children of an element, and the element itself
// and excute a callback function, passing in the elements
function mapElement(element, callback){
callback(element);
for(var i=0; i < element.children.length; i++){
callback(element.children[i]);
}
}

mapElement(
document.querySelector('body'),
(e) => {
e.style.fontFamily = 'Arial';
e.style.fontSize = '30pt';
}
);

[John Ryan Design]

You should include a custom CSS file in the first frame of your Captivate file:

$("body").append("<link rel='stylesheet' href='[path to your file]' type='text/css'>");

That way anything in that CSS can be used. 

In your case, before you use !important, try being more specific in your selector. (!important is so dirty!)

[alexanderf10450426]

Thank you John, that will be useful! 🙂 

Do you have a code that I could attach to buttons, which would then allow me to swap the attached style sheet to a different one, when each button is pressed?

The end result that I am seeking is for a student to be able to change their text/background to a combination like black on yellow for dyslexia?