Change Question slide font colour with Javascript

Community Beginner ,
Oct 22, 2020

Copy link to clipboard

Copied

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

TOPICS
Advanced, Quizzing and LMS

Views

71

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Advocate ,
Oct 22, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Oct 23, 2020

Copy link to clipboard

Copied

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';
}
);

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Explorer ,
Oct 23, 2020

Copy link to clipboard

Copied

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!)

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
alexanderf10450426 AUTHOR LATEST
Community Beginner ,
Oct 28, 2020

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more