• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Help My ARIA Labels contain variable name versus value

New Here ,
Jan 19, 2023 Jan 19, 2023

Copy link to clipboard

Copied

I am hoping someone in the community can help me out as I have been fighting this for a while now. I have a custom quiz that in the remediation page displays all the user inputed answers through their assigned variable. The on screen functions of this work perfectly, but when I review the slide with a screen reader the ARIA label for each of these items is only reading the variable name not the variable value. So for instance it will say "dollar sign dollar sign variable dollar sign dollar sign" instead of "Red".

 

I have seen another post with someone asking a similar question and someone provided a sample project that seems to have fixed this issue, but they have not provided any information on how they accomplished this. I have even tried contacting the OP of that sample and no response. 

 

This is really detrimental to my project and there is really no other way to gather and display this information beyond what I have programmed already. 

 

I am a serious beginner when I comes to javascript and have been reading a lot trying to figure this out. What I have come up with so far is below, but it doesn't work, or I am putting it in the wrong place. Any help that could be provided would be really appreciated as this is driving me crazy.

 

var answer = interfaceObj.getVariableValue("Q1Answer");
document.getElementById("Q1Answer_589").setAttribute("aria-label", answer);

TOPICS
Advanced

Views

282

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 19, 2023 Jan 19, 2023

Copy link to clipboard

Copied

I forgot to add a link to the sample project that is working on the other post. 

https://iti.cscc.edu/0_508_Testing/CPVarScanReplaceTest105Demo/index.html

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 20, 2023 Jan 20, 2023

Copy link to clipboard

Copied

For others that are having this issue. I did find a solution so far that will update the item with the variable. I have used a line of javascript and the CPExtra widget (scmndLoadJSFromAction) to update the inline code on the page. A new problem is that I have to declare each variable and element the variable is located, which with over 100 variables across multiple slides, is making the code add up quickly. In case someone is able to offer a solution to the new hurdle, my working code is below.

 

if(document.getElementById("SLabel_18")){
var slideLabel = window.cpAPIInterface.getVariableValue("cpInfoCurrentSlideLabel");
document.getElementById("SLabel_18").setAttribute("aria-label", slideLabel);

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 20, 2023 Jan 20, 2023

Copy link to clipboard

Copied

100 variables? Are you sure it is not possible to reuse some of them? 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 20, 2023 Jan 20, 2023

Copy link to clipboard

Copied

Unfortunately, there is not. It is a custom quiz, and each variable correlates to a learner-inputted answer. Once the learner inputs the response, the variable is displayed on the results page and the remediation page, which would have two different object IDs but the same variable value. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 20, 2023 Jan 20, 2023

Copy link to clipboard

Copied

I was just wondering, because in the past I  had to debug projects for clients that were choking due to a big amount of variables and/or duplicate advanced actions. Reducing both amounts by a slightly different approach (think shared actions and reused variables) in those cases solved not only the problems but had the project run much smoother. But I will not insist, you are just looking for a JS solution in this thread.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 20, 2023 Jan 20, 2023

Copy link to clipboard

Copied

I have around 100 variables in one project that are displayed multiple times in different objects. So as you can imagine the code is very long, and while it works, I know this is not the best way to accomplish this. My javascript abilities are fairly low and really only center around how to trigger items within Captivate, so to figure out how to automate this is above my abilities at this time. Would someone be willing to assist me with automating this code? Below is a sample of how the HTML would look and the javascript code that updates the variables.

 

<!DOCTYPE html>

<html>

<body>

<div id="slidecounter_589" class="cp-frameset" area-label="$$var_currentslide$$ of $$var_totalslides">

<h1>My First Heading</h1>

</div>

<div id="SLabel_1" class="cp-frameset" area-label="$$cpInfoCurrentSlideLabel">

<p>Information</p>

</div>

<div id="VAR_Text_1" class="cp-frameset" area-label="$$someValue$$">

<p>Information</p>

</div>

<div id="VAR_Text_2" class="cp-frameset" area-label="$$PurpleValue$$">

<p>Information</p>

</div>

<div id="VAR_Text_3" class="cp-frameset" area-label="$$GreenValue$$">

<p>Information</p>

</div>

<div id="slidecounter_589" class="cp-frameset" area-label="$$var_currentslide$$ of $$var_totalslides">

<h1>My First Heading</h1>

</div>

<div id="SLabel_1" class="cp-frameset" area-label="$$cpInfoCurrentSlideLabel">

<p>Information</p>

</div>

<div id="VAR_Text_4" class="cp-frameset" area-label="$$someValue$$">

<p>Information</p>

</div>

<div id="VAR_Text_5" class="cp-frameset" area-label="$$PurpleValue$$">

<p>Information</p>

</div>

<div id="VAR_Text_6" class="cp-frameset" area-label="$$GreenValue$$">

<p>Information</p>

</div>

</body>

</html>

//Script called in Captivate

//Update slide numbering

if(document.getElementById("slidecounter_589")){

var slidenum = window.cpAPIInterface.getVariableValue("var_currentslide");

var totalslides = window.cpAPIInterface.getVariableValue("var_totalslides");

document.getElementById("slidecounter_589").setAttribute("aria-label", slidenum + " of " + totalslides);

console.log("Slide number");

}

//Update Slide Label

if(document.getElementById("SLabel_1")){

var slideLabel = window.cpAPIInterface.getVariableValue("cpInfoCurrentSlideLabel");

document.getElementById("SLabel_1").setAttribute("aria-label", slideLabel);

console.log("Slide Title");

}

//Update first instance

if(document.getElementById("VAR_Text_1")){

var answer1 = window.cpAPIInterface.getVariableValue("someValue");

var answer2 = window.cpAPIInterface.getVariableValue("PurpleValue");

var answer3 = window.cpAPIInterface.getVariableValue("GreenValue");

document.getElementById("VAR_Text_1").setAttribute("aria-label", answer1);

document.getElementById("VAR_Text_2").setAttribute("aria-label", answer2);

document.getElementById("VAR_Text_3").setAttribute("aria-label", answer3);

console.log("Variable 1");

}

//Update Second instance

if(document.getElementById("VAR_Text_4")){

var answer1 = window.cpAPIInterface.getVariableValue("someValue");

var answer2 = window.cpAPIInterface.getVariableValue("PurpleValue");

var answer3 = window.cpAPIInterface.getVariableValue("GreenValue");

document.getElementById("VAR_Text_4").setAttribute("aria-label", answer1);

document.getElementById("VAR_Text_5").setAttribute("aria-label", answer2);

document.getElementById("VAR_Text_6").setAttribute("aria-label", answer3);

console.log("Variable 2");

}

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 24, 2023 Jan 24, 2023

Copy link to clipboard

Copied

Hey there Seufer Designs, I just wanted to let you know I just sent you a private message.   Hope your day is going well.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 06, 2024 Jan 06, 2024

Copy link to clipboard

Copied

Hi there - I am running into the same problem as Seufer Designs. I saw your other post and tested out your demo. I would be super grateful for any info you could send my way! @Seufer Designs @OH_CP_Lover_&_Hacker 

 

Thank you!!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 06, 2024 Jan 06, 2024

Copy link to clipboard

Copied

LATEST

I think I actually just figured it out! Combined some of the ideas from several responses and got it to work! 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Help resources