Skip to content

Commit

Permalink
Merge pull request #109 from gupta-arpan/C4GT_Issue_42
Browse files Browse the repository at this point in the history 
Issue #42 feat: Merge C4GT_Issue_42 into C4GT_2023 branch
  • Loading branch information
@rajnishdargan
rajnishdargan authored Sep 6, 2023
2 parents 081e9dc + 653b5b1 commit 2a5a754
Show file tree
Hide file tree
Showing 20 changed files with 1,278 additions and 57 deletions.
1 change: 1 addition & 0 deletions projects/questionset-editor-library-wc/src/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,5 @@
@import "./../../questionset-editor-library/src/lib/components/slider/slider.component.scss";
@import "./../../questionset-editor-library/src/lib/components/template/template.component.scss";
@import "./../../questionset-editor-library/src/lib/components/translations/translations.component.scss";
@import "./../../questionset-editor-library/src/lib/components/match/match.component.scss";

81 changes: 81 additions & 0 deletions projects/questionset-editor-library/src/lib/components/match/match.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<ng-container *ngIf="!isReadOnlyMode">
<div class="pt-10 fs-0-92 sb-w-85">
<label class="fs-0-92 font-weight-bold">
{{configService.labelConfig?.lbl?.setAnswers}}
<span class="sb-required">*</span>
</label>
<label class="fs-0-92 d-inline-block">
{{configService.labelConfig?.lbl?.selectLayout}}
</label>
<i class="icon info circle ml-8" suiPopup popupDelay="500" popupText={{configService.labelConfig?.lbl?.optionsPopupText}}></i>
<span class="divider mr-8"></span>
<span>
<button class="sb-btn sb-btn-xs sb-btn-outline-gray mr-5 q-sb-layout-single" [ngClass]="{active: 'mtf-horizontal' === templateType}" (click)="setTemplate('mtf-horizontal')">
<i class="mr-10 h-7"></i>
{{configService.labelConfig?.lbl?.horizontal}}
</button>
</span>
<span>
<button class="sb-btn sb-btn-xs sb-btn-outline-gray mr-5 q-sb-layout-two" [ngClass]="{active: 'mtf-vertical' === templateType}" (click)="setTemplate('mtf-vertical')">
<i class="mr-10 h-7 w-20"></i>
{{configService.labelConfig?.lbl?.vertical}}
</button>
</span>
</div>
<div class="d-flex pt-10 flex-dc sb-mcq-form">
<div class="d-flex flex-w-wrap" *ngFor="let option of editorState.options; let i = index">
<div class="w-100 mb-24">
<div class="d-flex flex-w-wrap flex-jc-space-between w-100">
<div class="w-49">
<lib-ckeditor-tool
[setCharacterLimit]="setCharacterLimit" (editorDataOutput)="option.left= $event.body; editorDataHandler($event);"
[editorDataInput]="option.left" class="ckeditor-tool__option mb-10"
[class.mb-5]="showFormError && ([undefined, ''].includes(option.left.body) || option.left.length > setCharacterLimit)">
</lib-ckeditor-tool>
<label class="ui basic red error label pt-1" *ngIf="option.left.length > setCharacterLimit">
{{configService.labelConfig?.lbl?.reduceSize}}
</label>
<label class="sb-color-error fs-0-785" *ngIf="showFormError && (option.left === undefined || option.left === '')">
{{configService.labelConfig?.lbl?.fillThisOption}}
</label>
</div>
<div class="w-49">
<lib-ckeditor-tool
[setCharacterLimit]="setCharacterLimit"
(editorDataOutput)="option.right = $event.body; editorDataHandler($event);"
[editorDataInput]="option.right" class="ckeditor-tool__option mb-10"
[class.mb-5]="showFormError && ([undefined, ''].includes(option.right.body) || option.right.length > setCharacterLimit)">
</lib-ckeditor-tool>
<label class="ui basic red error label pt-1" *ngIf="option.right.length > setCharacterLimit">
{{configService.labelConfig?.lbl?.reduceSize}}
</label>
<label class="sb-color-error fs-0-785" *ngIf="showFormError && (option.right === undefined || option.right === '')">
{{configService.labelConfig?.lbl?.fillThisOption}}
</label>
</div>
</div>
<div>
<button
class="sb-btn sb-btn-xs sb-left-icon-btn text-inherit b-0 bg-none no-hover p-0 mb-10 mt-10 right"
[disabled]="editorState.options.length < 3"
(click)="editorState.deleteOptions(i);editorDataHandler($event);"
libTelemetryInteract
[telemetryInteractEdata]="telemetryService.getTelemetryInteractEdata('delete_option','click','submit',telemetryService.telemetryPageId)">
<i class="icon trash outline fs-1-286 pull-left mr-0"></i>
<span class="sb-line-height-24">{{configService.labelConfig?.button_labels?.delete_pair_btn_label}}</span>
</button>
</div>
</div>
</div>
<div class="d-flex">
<button *ngIf="editorState.options.length < editorState.maximumOptions"
class="sb-btn sb-btn-outline-primary sb-btn-xs sb-left-icon-btn text-inherit b-0 bg-none no-hover p-0 mb-10 mt-10"
(click)="editorState.addOptions();editorDataHandler($event);"
libTelemetryInteract
[telemetryInteractEdata]="telemetryService.getTelemetryInteractEdata('add_option','click','submit',telemetryService.telemetryPageId)" >
<i class="plus circle icon fs-1-286 pull-left mr-0" aria-hidden="true"></i>
<span class="sb-line-height-24">{{configService.labelConfig?.lbl?.addPair}}</span>
</button>
</div>
</div>
</ng-container>
56 changes: 56 additions & 0 deletions projects/questionset-editor-library/src/lib/components/match/match.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
.q-sb-layout-single{
&:before{
content: url("/assets/images/layoutoneicon.svg");
}
&.active,
&:hover
{
border-color: var(--primary-400);
background-color: #ffffff;
color: var(--primary-400);
&:before{
content: url("/assets/images/layoutoneicon_blue.svg");
}
}
}
.q-sb-layout-two{
&:before{
content: url("/assets/images/layouttwoicon.svg");
}
&.active,
&:hover
{
border-color: var(--primary-400);
background-color: #ffffff;
color: var(--primary-400);
&:before{
content: url("/assets/images/layouttwoicon_blue.svg");
}
}
}

.b-0{
border: 0 !important;
}

.bg-none{
background-color: transparent !important;

&:hover,
&:focus {
background-color: transparent !important;
}
}

.w-49{
width: 49%;
max-width: 49%;
}

.sb-line-height-24 {
line-height: 24px;
}

.right{
float: right;
}
114 changes: 114 additions & 0 deletions projects/questionset-editor-library/src/lib/components/match/match.component.spec.data.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
export const mockOptionData = {
editorOptionData: {
question: "<p>Match the following with appropriate answer?</p>",
options: [
{
left: "<p>Lotus</p>",
right: "<p>Flower</p>",
},
{
left: "<p>Mango</p>",
right: "<p>Fruit</p>",
},
],
templateId: "mtf-vertical",
correctMatchPair: [{ "0": 0 }, { "1": 1 }],
numberOfOptions: 4,
},
prepareMtfBody: {
templateId: "mtf-horizontal",
name: "Match The Following Question",
responseDeclaration: {
response1: {
cardinality: "multiple",
type: "map",
correctResponse: {
value: [
{
"0": 0,
},
{
"1": 1,
},
],
},
mapping: [
{
value: {
"0": 0,
},
score: 2,
},
{
value: {
"1": 1,
},
score: 2,
},
],
},
},
interactionTypes: ["match"],
interactions: {
response1: {
type: "match",
options: {
left: [
{
label: "<p>Lotus</p>",
value: 0,
},
{
label: "<p>Mango</p>",
value: 1,
},
],
right: [
{
label: "<p>Flower</p>",
value: 0,
},
{
label: "<p>Fruit</p>",
value: 1,
},
],
},
},
},
editorState: {
options: {
left: [
{
value: {
body: "<p>Lotus</p>",
value: 0,
},
},
{
value: {
body: "<p>Mango</p>",
value: 1,
},
},
],
right: [
{
value: {
body: "<p>Flower</p>",
value: 0,
},
},
{
value: {
body: "<p>Fruit</p>",
value: 1,
},
},
],
},
},
qType: "MTF",
primaryCategory: "Match The Following Question",
},
};
Loading

0 comments on commit 2a5a754

Please sign in to comment.