Skip to content

Commit

Permalink
input sizes
Browse files Browse the repository at this point in the history
  • Loading branch information
patrick committed Jun 27, 2023
1 parent 27575f8 commit e3f92c1
Show file tree
Hide file tree
Showing 6 changed files with 166 additions and 29 deletions.
15 changes: 15 additions & 0 deletions ...nents/qti-interaction/qti-text-entry-interaction/qti-text-entry-interaction.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { Canvas, Meta } from '@storybook/blocks';

import * as StylesheetStories from './qti-text-entry-interaction.stories';

<Meta of={StylesheetStories} />

# qti-choice-interaction

The ChoiceInteraction.Type (qti-choice-interaction) interaction presents a collection of choices to the candidate. The candidate's task is to select one or more of the choices, up to a maximum of max-choices. The interaction is always initialized with no choices selected.

<Canvas of={StylesheetStories.Interaction} />

<Canvas of={StylesheetStories.Sizes} />

<Canvas of={StylesheetStories.Formula} />
134 changes: 127 additions & 7 deletions ...mponents/qti-interaction/qti-text-entry-interaction/qti-text-entry-interaction.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,12 +51,132 @@ export const Interaction = {

export const Sizes = {
render: args =>
html`
${inputWidthClass.map(
width =>
html`<qti-text-entry-interaction class=${width} response-identifier="RESPONSE"></qti-text-entry-interaction
><br />`
)}
`,
html`<p>
qti-input-width-1 :
<qti-text-entry-interaction
class="qti-input-width-1"
expected-length="15"
response-identifier="RESPONSE1"
></qti-text-entry-interaction>
</p>
<p>
qti-input-width-2 :
<qti-text-entry-interaction
class="qti-input-width-2"
expected-length="15"
response-identifier="RESPONSE2"
></qti-text-entry-interaction>
</p>
<p>
qti-input-width-3 :
<qti-text-entry-interaction
class="qti-input-width-3"
expected-length="15"
response-identifier="RESPONSE3"
></qti-text-entry-interaction>
</p>
<p>
qti-input-width-4 :
<qti-text-entry-interaction
class="qti-input-width-4"
expected-length="15"
response-identifier="RESPONSE4"
></qti-text-entry-interaction>
</p>
<p>
qti-input-width-6 :
<qti-text-entry-interaction
class="qti-input-width-6"
expected-length="15"
response-identifier="RESPONSE5"
></qti-text-entry-interaction>
</p>
<p>
qti-input-width-10:
<qti-text-entry-interaction
class="qti-input-width-10"
expected-length="15"
response-identifier="RESPONSE6"
></qti-text-entry-interaction>
</p>
<p>
qti-input-width-15:
<qti-text-entry-interaction
class="qti-input-width-15"
expected-length="15"
response-identifier="RESPONSE7"
></qti-text-entry-interaction>
</p>
<p>
qti-input-width-20:
<qti-text-entry-interaction
class="qti-input-width-20"
expected-length="20"
response-identifier="RESPONSE8"
></qti-text-entry-interaction>
</p>
<p>
qti-input-width-72:
<qti-text-entry-interaction
class="qti-input-width-72"
expected-length="72"
response-identifier="RESPONSE9"
></qti-text-entry-interaction>
</p>`,
args: {}
};

export const Formula = {
render: args =>
html`<p>Hoeveel kilo CO2 wordt jaarlijks bespaard door 8 zonnepanelen?</p>
<ul>
<li>Levensduur zonnepaneel 25 jaar</li>
<li>CO2 uitstoot voor de productie van 1 zonnepaneel is 500 kilo</li>
<li>1 zonnepaneel voorkomt 120 kilo CO2 uitstoot per jaar</li>
</ul>
<p>Reken uit:</p>
<p>
CO2 uitstoot voor productie van de zonnepanelen per jaar is 8 x
<qti-text-entry-interaction
class="qti-input-width-3"
response-identifier="RESPONSE"
></qti-text-entry-interaction>
/
<qti-text-entry-interaction
class="qti-input-width-3"
response-identifier="RESPONSE"
></qti-text-entry-interaction>
=
<qti-text-entry-interaction
class="qti-input-width-3"
response-identifier="RESPONSE"
></qti-text-entry-interaction>
kilo
</p>
<p>
CO2 uitstoot die wordt bespaard per jaar is 8 x
<qti-text-entry-interaction
class="qti-input-width-3"
response-identifier="RESPONSE"
></qti-text-entry-interaction>
-
<qti-text-entry-interaction
class="qti-input-width-3"
response-identifier="RESPONSE"
></qti-text-entry-interaction>
=
<qti-text-entry-interaction
class="qti-input-width-3"
response-identifier="RESPONSE"
></qti-text-entry-interaction>
kilo
</p>`,
args: {}
};
38 changes: 20 additions & 18 deletions ...b/qti-components/qti-interaction/qti-text-entry-interaction/qti-text-entry-interaction.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { css, html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { Interaction } from '../internal/interaction/interaction';
import { customElement, property, state } from 'lit/decorators.js';
import { watch } from '../../../decorators';
import { createRef } from 'lit/directives/ref.js';

@customElement('qti-text-entry-interaction')
export class QtiTextEntryInteraction extends Interaction {
Expand All @@ -14,19 +16,22 @@ export class QtiTextEntryInteraction extends Interaction {
@state()
private _value = '';

@state()
private _size = 5;

inputRef = createRef<HTMLInputElement>();

@property({ type: String, attribute: 'class' }) classNames;
// @watch('classNames', { waitUntilFirstUpdate: true })
// handleclassNamesChange(old, disabled: boolean) {
// const classNames = this.classNames.split(' ');
// classNames.forEach((className: string) => {
// if (className.startsWith('qti-height-lines')) {
// const nrRows = className.replace('qti-height-lines-', '');
// if (this.textareaRef) {
// this.textareaRef.value.rows = parseInt(nrRows);
// }
// }
// });
// }
@watch('classNames')
handleclassNamesChange(old, classes: string) {
const classNames = classes.split(' ');
classNames.forEach((className: string) => {
if (className.startsWith('qti-input-width')) {
const nrRows = className.replace('qti-input-width-', '');
this._size = parseInt(nrRows);
}
});
}

public set response(value: string | undefined) {
this._value = value !== undefined ? value : '';
Expand All @@ -39,12 +44,8 @@ export class QtiTextEntryInteraction extends Interaction {
static override get styles() {
return [
css`
/* PK: display host as block, else design will be collapsed */
:host {
display: inline-block;
}
input {
border: 0;
display: inline-flex;
}
`
];
Expand All @@ -61,12 +62,13 @@ export class QtiTextEntryInteraction extends Interaction {
type="text"
placeholder="${ifDefined(this.placeholderText ? this.placeholderText : undefined)}"
.value="${this._value}"
size="${ifDefined(this.expectedLength ? this.expectedLength : undefined)}"
size="${this._size}"
pattern="${ifDefined(this.patternMask ? this.patternMask : undefined)}"
?disabled="${this.disabled}"
?readonly="${this.readonly}"
/>`;
}
//
// maxlength="${ifDefined(this.expectedLength ? this.expectedLength : undefined)}"

protected textChanged(event: Event) {
Expand Down
2 changes: 1 addition & 1 deletion src/styles/qti-components.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
}
/* - text : text-entry and extended-text */
.text {
@apply base cursor-text rounded-sm p-3 text-gray-600 shadow-inner;
@apply base cursor-text rounded-sm border-0 p-3 text-gray-600 shadow-inner;
}

/* - spot : gap-select-point, graphic-order, qti-graphic-associate */
Expand Down
2 changes: 1 addition & 1 deletion src/styles/qti-interactions.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ qti-choice-interaction {
qti-text-entry-interaction {
@apply my-2;
&::part(input) {
@apply text hover:hov focus:foc w-full;
@apply text hover:hov focus:foc;
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/styles/qti/qti-input-width.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.qti-input-width-1 {
/* .qti-input-width-1 {
width: 1ch;
min-width: 1ch;
}
Expand Down Expand Up @@ -33,4 +33,4 @@
.qti-input-width-72 {
width: 72ch;
min-width: 72ch;
}
} */

0 comments on commit e3f92c1

Please sign in to comment.