Skip to content

Commit

Permalink
Backport of preventing checkwork tab stops when disabled
Browse files Browse the repository at this point in the history 
Backport of PR #222 to 0.6 branch
  • Loading branch information
@dqnykamp
dqnykamp committed Jul 23, 2024
1 parent e10ac2b commit 0167b7e
Show file tree
Hide file tree
Showing 11 changed files with 264 additions and 63 deletions.
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion packages/doenetml-worker/src/components/abstract/BaseComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -529,7 +529,9 @@ export default class BaseComponent {
if (!usedDefault.disabledPreliminary) {
return {
setValue: {
disabled: dependencyValues.disabledPreliminary,
disabled: Boolean(
dependencyValues.disabledPreliminary,
),
},
};
}
Expand Down
2 changes: 1 addition & 1 deletion packages/doenetml/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "@doenet/doenetml",
"type": "module",
"description": "Semantic markup for building interactive web activities",
"version": "0.6.6",
"version": "0.6.8",
"license": "AGPL-3.0-or-later",
"homepage": "https://github.com/Doenet/DoenetML#readme",
"private": true,
Expand Down
28 changes: 23 additions & 5 deletions packages/doenetml/src/Viewer/renderers/answer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,12 +87,14 @@ export default React.memo(function Answer(props) {
padding: "1px 6px 1px 6px",
};

let checkWorkTabIndex = "0";
if (disabled) {
checkWorkStyle.backgroundColor = getComputedStyle(
document.documentElement,
).getPropertyValue("--mainGray");
checkWorkStyle.color = "black";
checkWorkStyle.cursor = "not-allowed";
checkWorkTabIndex = "-1";
}

let checkWorkText = SVs.submitLabel;
Expand All @@ -102,7 +104,7 @@ export default React.memo(function Answer(props) {
let checkworkComponent = (
<Button
id={id + "_submit"}
tabIndex="0"
tabIndex={checkWorkTabIndex}
disabled={disabled}
style={checkWorkStyle}
onClick={submitAnswer}
Expand Down Expand Up @@ -133,7 +135,11 @@ export default React.memo(function Answer(props) {
document.documentElement,
).getPropertyValue("--mainGreen");
checkworkComponent = (
<Button id={id + "_correct"} style={checkWorkStyle}>
<Button
id={id + "_correct"}
style={checkWorkStyle}
tabIndex={checkWorkTabIndex}
>
<FontAwesomeIcon icon={faCheck} />
&nbsp; Correct
</Button>
Expand All @@ -143,7 +149,11 @@ export default React.memo(function Answer(props) {
document.documentElement,
).getPropertyValue("--mainRed");
checkworkComponent = (
<Button id={id + "_incorrect"} style={checkWorkStyle}>
<Button
id={id + "_incorrect"}
style={checkWorkStyle}
tabIndex={checkWorkTabIndex}
>
<FontAwesomeIcon icon={faTimes} />
&nbsp; Incorrect
</Button>
Expand All @@ -154,7 +164,11 @@ export default React.memo(function Answer(props) {
let partialCreditContents = `${percent}% Correct`;

checkworkComponent = (
<Button id={id + "_partial"} style={checkWorkStyle}>
<Button
id={id + "_partial"}
style={checkWorkStyle}
tabIndex={checkWorkTabIndex}
>
{partialCreditContents}
</Button>
);
Expand All @@ -164,7 +178,11 @@ export default React.memo(function Answer(props) {
if (validationState !== "unvalidated") {
checkWorkStyle.backgroundColor = "rgb(74, 3, 217)";
checkworkComponent = (
<Button id={id + "_saved"} style={checkWorkStyle}>
<Button
id={id + "_saved"}
style={checkWorkStyle}
tabIndex={checkWorkTabIndex}
>
<FontAwesomeIcon icon={faCloud} />
&nbsp; Response Saved
</Button>
Expand Down
28 changes: 23 additions & 5 deletions packages/doenetml/src/Viewer/renderers/booleanInput.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -468,6 +468,7 @@ export default React.memo(function BooleanInput(props) {
cursor: "pointer",
padding: "1px 6px 1px 6px",
};
let checkWorkTabIndex = "0";

if (disabled) {
// Disable the checkWorkButton
Expand All @@ -476,6 +477,7 @@ export default React.memo(function BooleanInput(props) {
).getPropertyValue("--mainGray");
checkWorkStyle.color = "black";
checkWorkStyle.cursor = "not-allowed";
checkWorkTabIndex = "-1";
}

//Assume we don't have a check work button
Expand All @@ -497,7 +499,7 @@ export default React.memo(function BooleanInput(props) {
checkWorkButton = (
<Button
id={id + "_submit"}
tabIndex="0"
tabIndex={checkWorkTabIndex}
disabled={disabled}
// ref={c => { this.target = c && ReactDOM.findDOMNode(c); }}
style={checkWorkStyle}
Expand Down Expand Up @@ -537,7 +539,11 @@ export default React.memo(function BooleanInput(props) {
document.documentElement,
).getPropertyValue("--mainGreen");
checkWorkButton = (
<Button id={id + "_correct"} style={checkWorkStyle}>
<Button
id={id + "_correct"}
style={checkWorkStyle}
tabIndex={checkWorkTabIndex}
>
<FontAwesomeIcon icon={faCheck} />
</Button>
);
Expand All @@ -550,7 +556,11 @@ export default React.memo(function BooleanInput(props) {

checkWorkStyle.backgroundColor = "#efab34";
checkWorkButton = (
<Button id={id + "_partial"} style={checkWorkStyle}>
<Button
id={id + "_partial"}
style={checkWorkStyle}
tabIndex={checkWorkTabIndex}
>
{partialCreditContents}
</Button>
);
Expand All @@ -560,7 +570,11 @@ export default React.memo(function BooleanInput(props) {
document.documentElement,
).getPropertyValue("--mainRed");
checkWorkButton = (
<Button id={id + "_incorrect"} style={checkWorkStyle}>
<Button
id={id + "_incorrect"}
style={checkWorkStyle}
tabIndex={checkWorkTabIndex}
>
<FontAwesomeIcon icon={faTimes} />
</Button>
);
Expand All @@ -570,7 +584,11 @@ export default React.memo(function BooleanInput(props) {
checkWorkStyle.backgroundColor = "rgb(74, 3, 217)";
checkWorkStyle.padding = "1px 8px 1px 4px"; // To center the faCloud icon
checkWorkButton = (
<Button id={id + "_saved"} style={checkWorkStyle}>
<Button
id={id + "_saved"}
style={checkWorkStyle}
tabIndex={checkWorkTabIndex}
>
<FontAwesomeIcon icon={faCloud} />
</Button>
);
Expand Down
71 changes: 63 additions & 8 deletions packages/doenetml/src/Viewer/renderers/choiceInput.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,23 @@ export default React.memo(function ChoiceInput(props) {
padding: "1px 6px 1px 6px",
width: "24px",
};
let checkWorkTabIndex = "0";

let selectStyle = {};

if (disabled) {
// Disable the checkWorkButton
checkWorkStyle.backgroundColor = getComputedStyle(
document.documentElement,
).getPropertyValue("--mainGray");
checkWorkStyle.color = "black";
checkWorkStyle.cursor = "not-allowed";
checkWorkTabIndex = "-1";
selectStyle.cursor = "not-allowed";
selectStyle.borderColor = getComputedStyle(
document.documentElement,
).getPropertyValue("--mainGray");
}

//Assume we don't have a check work button
let checkWorkButton = null;
Expand All @@ -168,7 +185,7 @@ export default React.memo(function ChoiceInput(props) {
<Button
id={id + "_submit"}
disabled={disabled}
tabIndex="0"
tabIndex={checkWorkTabIndex}
// ref={c => { this.target = c && ReactDOM.findDOMNode(c); }}
style={checkWorkStyle}
onClick={() =>
Expand Down Expand Up @@ -202,7 +219,11 @@ export default React.memo(function ChoiceInput(props) {
document.documentElement,
).getPropertyValue("--mainGreen");
checkWorkButton = (
<Button id={id + "_correct"} style={checkWorkStyle}>
<Button
id={id + "_correct"}
style={checkWorkStyle}
tabIndex={checkWorkTabIndex}
>
<FontAwesomeIcon icon={faCheck} />
</Button>
);
Expand All @@ -215,7 +236,11 @@ export default React.memo(function ChoiceInput(props) {

checkWorkStyle.backgroundColor = "#efab34";
checkWorkButton = (
<Button id={id + "_partial"} style={checkWorkStyle}>
<Button
id={id + "_partial"}
style={checkWorkStyle}
tabIndex={checkWorkTabIndex}
>
{partialCreditContents}
</Button>
);
Expand All @@ -228,6 +253,7 @@ export default React.memo(function ChoiceInput(props) {
<Button
id={id + "_incorrect"}
style={checkWorkStyle}
tabIndex={checkWorkTabIndex}
>
<FontAwesomeIcon icon={faTimes} />
</Button>
Expand All @@ -238,7 +264,11 @@ export default React.memo(function ChoiceInput(props) {
checkWorkStyle.backgroundColor = "rgb(74, 3, 217)";
checkWorkStyle.padding = "1px 8px 1px 4px"; // To center the faCloud icon
checkWorkButton = (
<Button id={id + "_saved"} style={checkWorkStyle}>
<Button
id={id + "_saved"}
style={checkWorkStyle}
tabIndex={checkWorkTabIndex}
>
<FontAwesomeIcon icon={faCloud} />
</Button>
);
Expand Down Expand Up @@ -311,6 +341,7 @@ export default React.memo(function ChoiceInput(props) {
value={value}
disabled={disabled}
multiple={SVs.selectMultiple}
style={selectStyle}
>
<option hidden={true} value="">
{SVs.placeHolder}
Expand All @@ -329,6 +360,17 @@ export default React.memo(function ChoiceInput(props) {
cursor: "pointer",
// fontWeight: "bold",
};
let checkWorkTabIndex = "0";

if (disabled) {
// Disable the checkWorkButton
checkWorkStyle.backgroundColor = getComputedStyle(
document.documentElement,
).getPropertyValue("--mainGray");
checkWorkStyle.color = "black";
checkWorkStyle.cursor = "not-allowed";
checkWorkTabIndex = "-1";
}

let checkworkComponent = null;

Expand All @@ -346,7 +388,7 @@ export default React.memo(function ChoiceInput(props) {
checkworkComponent = (
<Button
id={id + "_submit"}
tabIndex="0"
tabIndex={checkWorkTabIndex}
disabled={disabled}
style={checkWorkStyle}
onClick={() =>
Expand Down Expand Up @@ -382,7 +424,11 @@ export default React.memo(function ChoiceInput(props) {
document.documentElement,
).getPropertyValue("--mainGreen");
checkworkComponent = (
<Button id={id + "_correct"} style={checkWorkStyle}>
<Button
id={id + "_correct"}
style={checkWorkStyle}
tabIndex={checkWorkTabIndex}
>
<FontAwesomeIcon icon={faCheck} />
&nbsp; Correct
</Button>
Expand All @@ -395,6 +441,7 @@ export default React.memo(function ChoiceInput(props) {
<Button
id={id + "_incorrect"}
style={checkWorkStyle}
tabIndex={checkWorkTabIndex}
>
<FontAwesomeIcon icon={faTimes} />
&nbsp; Incorrect
Expand All @@ -406,15 +453,23 @@ export default React.memo(function ChoiceInput(props) {
let partialCreditContents = `${percent}% Correct`;

checkworkComponent = (
<Button id={id + "_partial"} style={checkWorkStyle}>
<Button
id={id + "_partial"}
style={checkWorkStyle}
tabIndex={checkWorkTabIndex}
>
{partialCreditContents}
</Button>
);
}
} else {
checkWorkStyle.backgroundColor = "rgb(74, 3, 217)";
checkworkComponent = (
<Button id={id + "_saved"} style={checkWorkStyle}>
<Button
id={id + "_saved"}
style={checkWorkStyle}
tabIndex={checkWorkTabIndex}
>
<FontAwesomeIcon icon={faCloud} />
&nbsp; Response Saved
</Button>
Expand Down
Loading

0 comments on commit 0167b7e

Please sign in to comment.