Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Generic answer feedback #6497

Open
wants to merge 4 commits into
base: trunk
Choose a base branch
from
Open

Generic answer feedback #6497

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fbf48fe
Initial generic answer creation
Bones5 Feb 7, 2023
25d6b60
Only display generic feedback for text questions
Bones5 Feb 8, 2023
ec6f7d6
Merge remote-tracking branch 'upstream/trunk' into generic-answer-fee…
Bones5 Feb 17, 2023
32d5407
Adds generic feedback to frontend
Bones5 Feb 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions assets/blocks/quiz/answer-blocks/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ const questionTypes = {
view: MultipleChoiceAnswer.view,
settings: [ QuestionMultipleChoiceSettings ],
feedback: true,
hasContextualFeedback: true,
validate: ( { answers = [] } = {} ) => {
return {
noAnswers: answers.filter( ( a ) => a.label ).length < 2,
Expand Down Expand Up @@ -89,6 +90,7 @@ const questionTypes = {
edit: TrueFalseAnswer,
view: TrueFalseAnswer.view,
feedback: true,
hasContextualFeedback: true,
settings: [],
},
'gap-fill': {
Expand All @@ -97,6 +99,7 @@ const questionTypes = {
edit: GapFillAnswer,
view: GapFillAnswer.view,
feedback: true,
hasContextualFeedback: true,
settings: [],
validate: ( { before, after, gap } = {} ) => {
return {
Expand Down Expand Up @@ -130,6 +133,7 @@ const questionTypes = {
'Short answer to an open-ended question.',
'sensei-lms'
),
feedback: true,
edit: SingleLineAnswer,
view: SingleLineAnswer,
settings: [ QuestionGradingNotesSettings ],
Expand All @@ -140,6 +144,7 @@ const questionTypes = {
'Long answer to an open-ended question.',
'sensei-lms'
),
feedback: true,
edit: MultiLineAnswer,
view: MultiLineAnswer,
settings: [ QuestionGradingNotesSettings ],
Expand Down
7 changes: 7 additions & 0 deletions assets/blocks/quiz/answer-feedback-block/answer-feedback.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,13 @@ const config = {
'sensei-lms'
),
},
generic: {
title: __( 'Feedback', 'sensei-lms' ),
placeholder: __(
'Show a message when the question has been answered',
'sensei-lms'
),
},
};

/**
Expand Down
13 changes: 13 additions & 0 deletions assets/blocks/quiz/answer-feedback-block/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,19 @@ const sharedMetadata = {
},
};

/**
* Generic Answer Feedback block definition.
*/
export const answerFeedbackGenericBlock = {
...sharedMetadata,
name: 'sensei-lms/quiz-question-feedback-generic',
title: __( 'Generic Answer Feedback', 'sensei-lms' ),
icon,
description: __( 'Display generic answer feedback.', 'sensei-lms' ),
edit: ( props ) => edit( { ...props, type: 'generic' } ),
save: () => <InnerBlocks.Content />,
};

/**
* Correct Answer Feedback block definition.
*/
Expand Down
2 changes: 2 additions & 0 deletions assets/blocks/quiz/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import registerSenseiBlocks from '../register-sensei-blocks';
import {
answerFeedbackCorrectBlock,
answerFeedbackIncorrectBlock,
answerFeedbackGenericBlock,
} from './answer-feedback-block';
import questionDescriptionBlock from './question-description-block';
import questionAnswersBlock from './question-answers-block';
Expand All @@ -21,6 +22,7 @@ const blocks = [
questionDescriptionBlock,
answerFeedbackCorrectBlock,
answerFeedbackIncorrectBlock,
answerFeedbackGenericBlock,
questionAnswersBlock,
];

Expand Down
14 changes: 4 additions & 10 deletions assets/blocks/quiz/question-answers-block/question-answers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,9 @@ import { QuestionContext } from '../question-block/question-context';
*
*/
const QuestionAnswers = () => {
const {
answer,
setAttributes,
AnswerBlock,
hasSelected,
canHaveFeedback,
} = useContext( QuestionContext );
const { answer, setAttributes, AnswerBlock, hasSelected } = useContext(
QuestionContext
);
return (
<div className={ classnames( 'sensei-lms-question-answers-block' ) }>
{ AnswerBlock?.edit && (
Expand All @@ -39,9 +35,7 @@ const QuestionAnswers = () => {
}
hasSelected={ hasSelected }
/>
{ canHaveFeedback && hasSelected && (
<AnswerFeedbackToggle />
) }
{ hasSelected && <AnswerFeedbackToggle /> }
</>
) }
</div>
Expand Down
51 changes: 25 additions & 26 deletions assets/blocks/quiz/question-block/question-block.editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ $block: '.sensei-lms-question-block';
@import '../../../shared/styles/wp-colors';

.sensei-lms-question-block {

.editor-styles-wrapper .wp-block &__title, .editor-styles-wrapper .wp-block &__index {
.editor-styles-wrapper .wp-block &__title,
.editor-styles-wrapper .wp-block &__index {
font-size: 24px;
margin-top: 0;
margin-bottom: 0;
Expand All @@ -30,7 +30,7 @@ $block: '.sensei-lms-question-block';
white-space: nowrap;

#{$block}.is-draft & {
opacity: .62;
opacity: 0.62;
}

.editor-styles-wrapper .wp-block & {
Expand All @@ -47,7 +47,6 @@ $block: '.sensei-lms-question-block';
}

&__type-selector {

&__popover .sensei-toolbar-dropdown__option {
padding: 12px;
}
Expand All @@ -74,7 +73,8 @@ $block: '.sensei-lms-question-block';
}
}

&__text-input-placeholder, &__file-input-placeholder {
&__text-input-placeholder,
&__file-input-placeholder {
border: 2px solid currentColor;
border-radius: 2px;
padding: 5px;
Expand All @@ -99,7 +99,9 @@ $block: '.sensei-lms-question-block';
&__input-label {
}

&__answer--multiple-choice, &__answer--true-false, &__answer--gap-fill {
&__answer--multiple-choice,
&__answer--true-false,
&__answer--gap-fill {
.editor-styles-wrapper & {
margin: 28px 0;
padding: 0;
Expand All @@ -110,13 +112,13 @@ $block: '.sensei-lms-question-block';
}
}

&__answer--multiple-choice, &__answer--true-false {
&__answer--multiple-choice,
&__answer--true-false {
.editor-styles-wrapper & li {
min-height: 35px;
}

&__toggle {

&__wrapper {
flex-basis: 65px;
margin-left: 12px;
Expand All @@ -131,7 +133,7 @@ $block: '.sensei-lms-question-block';
background: #fff;
border: 1px solid $gray-900;

&:not(:hover) {
&:not( :hover ) {
color: $gray-900 !important;
}
}
Expand All @@ -153,15 +155,13 @@ $block: '.sensei-lms-question-block';
&__control {
margin-right: 12px;
}

}

.editor-styles-wrapper & li {
min-height: 45px;
display: flex;
align-items: baseline;
}

}

&__multiple-choice-answer-option {
Expand All @@ -172,11 +172,9 @@ $block: '.sensei-lms-question-block';
&__input {
flex: 1;
}

}

&__answer--gap-fill {

.components-form-token-field {
&__input-container {
margin: 0;
Expand All @@ -192,7 +190,7 @@ $block: '.sensei-lms-question-block';

&__token {
font-size: inherit;
background: var(--wp-admin-theme-color, #333);
background: var( --wp-admin-theme-color, #333 );
color: #fff;
align-items: center;

Expand All @@ -216,10 +214,9 @@ $block: '.sensei-lms-question-block';
}

&__text {
border: 1px solid rgba(#ccc, 0.75);
border: 1px solid rgba( #ccc, 0.75 );
padding: 12px;
border-radius: 2px;

}

.editor-styles-wrapper &__right-answers {
Expand All @@ -238,7 +235,7 @@ $block: '.sensei-lms-question-block';

&__token {
font-size: inherit;
background: var(--wp-admin-theme-color, #333);
background: var( --wp-admin-theme-color, #333 );
color: #fff;
padding: 6px;
margin-right: 4px;
Expand All @@ -256,7 +253,7 @@ $block: '.sensei-lms-question-block';
padding: 1px 4px;
padding-left: 0;
margin-top: 2px;
background: rgba(#ccc, 0.2);
background: rgba( #ccc, 0.2 );
position: absolute;
cursor: default;
user-select: none;
Expand Down Expand Up @@ -284,29 +281,31 @@ $block: '.sensei-lms-question-block';
padding: 0;
margin: 0;
color: inherit;
&:hover, &:focus-visible {
color: var(--wp-admin-theme-color);
&:hover,
&:focus-visible {
color: var( --wp-admin-theme-color );
}
}
&__help {
opacity: .6;
opacity: 0.6;
font-size: 12px;
}
&__icon {
vertical-align: middle;
margin-left: 6px;
fill: currentColor;
.sensei-lms-question-block__answer-feedback-toggle:not(.is-visible) & {
.sensei-lms-question-block__answer-feedback-toggle:not( .is-visible )
& {
position: relative;
top: -2px;
}
}

}

&:not(.show-answer-feedback) {
.wp-block[data-type="sensei-lms/quiz-question-feedback-correct"],
.wp-block[data-type="sensei-lms/quiz-question-feedback-incorrect"] {
&:not( .show-answer-feedback ) {
.wp-block[data-type='sensei-lms/quiz-question-feedback-correct'],
.wp-block[data-type='sensei-lms/quiz-question-feedback-incorrect'],
.wp-block[data-type='sensei-lms/quiz-question-feedback-generic'] {
display: none;
}
}
Expand Down
12 changes: 9 additions & 3 deletions assets/blocks/quiz/question-block/question-edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { withBlockValidation } from '../../../shared/blocks/block-validation';
import {
answerFeedbackCorrectBlock,
answerFeedbackIncorrectBlock,
answerFeedbackGenericBlock,
} from '../answer-feedback-block';
import questionDescriptionBlock from '../question-description-block';
import questionAnswersBlock from '../question-answers-block';
Expand Down Expand Up @@ -110,6 +111,7 @@ const QuestionEdit = ( props ) => {
const AnswerBlock = type && types[ type ];

const canHaveFeedback = AnswerBlock?.feedback;
const canHaveContextualFeedback = AnswerBlock?.hasContextualFeedback;

const hasSelected = useHasSelected( props );
const isSingle = context && ! ( 'sensei-lms/quizId' in context );
Expand Down Expand Up @@ -162,12 +164,16 @@ const QuestionEdit = ( props ) => {
[ questionAnswersBlock.name, {} ],
...( canHaveFeedback
? [
[ answerFeedbackCorrectBlock.name, {} ],
[ answerFeedbackIncorrectBlock.name, {} ],
...( canHaveContextualFeedback
? [
[ answerFeedbackCorrectBlock.name, {} ],
[ answerFeedbackIncorrectBlock.name, {} ],
]
: [ [ answerFeedbackGenericBlock.name, {} ] ] ),
]
: [] ),
],
[ canHaveFeedback ]
[ canHaveFeedback, canHaveContextualFeedback ]
);

if ( ! editable ) {
Expand Down
4 changes: 3 additions & 1 deletion includes/class-sensei-grading-user-quiz.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,9 +138,10 @@ public function display() {
$custom_feedback = $custom_feedback[ $question_id ] ?? '';
$correct_feedback = Sensei_Quiz::get_correct_answer_feedback( $question_id );
$incorrect_feedback = Sensei_Quiz::get_incorrect_answer_feedback( $question_id );
$generic_feedback = Sensei_Quiz::get_generic_answer_feedback( $question_id );
$question_answer_notes = Sensei()->quiz->get_user_question_feedback( $lesson_id, $question_id, $user_id );

if ( ! $correct_feedback && ! $incorrect_feedback ) {
if ( ! $correct_feedback && ! $incorrect_feedback && ! $generic_feedback ) {
$custom_feedback = $question_answer_notes;
}

Expand Down Expand Up @@ -355,6 +356,7 @@ public function display() {
<h5><?php esc_html_e( 'Answer Feedback', 'sensei-lms' ); ?></h5>
<div class="answer-feedback-correct"><?php echo wp_kses_post( $correct_feedback ); ?></div>
<div class="answer-feedback-incorrect"><?php echo wp_kses_post( $incorrect_feedback ); ?></div>
<div class="answer-feedback-generic"><?php echo wp_kses_post( $generic_feedback ); ?></div>
<textarea class="correct-answer" name="questions_feedback[<?php echo esc_attr( $question_id ); ?>]" placeholder="<?php esc_attr_e( 'Add custom feedback here...', 'sensei-lms' ); ?>"><?php echo esc_html( $custom_feedback ); ?></textarea>
</div>
</div>
Expand Down
Loading