Giter Club home page Giter Club logo

adapt-contrib-textinput's Introduction

adapt-contrib-textInput

Text Input is a question component bundled with the Adapt framework.

text input in action

Text Input allows the user to input a free-form answer in response to an initial question. The author may supply multiple correct answers to accommodate, for example, variations in spelling. The author may also supply a suffix and prefix to be added to the text field.

Visit the Text Input wiki for more information about its functionality and for explanations of key properties.

Installation

As one of Adapt's core components, Text Input is included with the installation of the Adapt framework and the installation of the Adapt authoring tool.

  • If Text Input has been uninstalled from the Adapt framework, it may be reinstalled. With the Adapt CLI installed, run the following from the command line: adapt install adapt-contrib-textInput

    Alternatively, this component can also be installed by adding the following line of code to the adapt.json file: "adapt-contrib-textInput": "*" Then running the command: adapt install (This second method will reinstall all plug-ins listed in adapt.json.)

  • If Text Input has been uninstalled from the Adapt authoring tool, it may be reinstalled using the Plug-in Manager.

Settings Overview

The attributes listed below are used in components.json to configure Text Input, and are properly formatted as JSON in example.json. Visit the Text Input wiki for more information about how they appear in the authoring tool.

Attributes

In addition to the attributes specifically listed below, question components can implement the following sets of attributes:

  • core model attributes: These are inherited by every Adapt component. They have no default values. Like the attributes below, their values are assigned in components.json.
  • core buttons: Default values are found in course.json, but may be overridden by Text Input's model in components.json.

_component (string): This value must be: textinput. (One word, all lowercase.)

_classes (string): CSS class name to be applied to [core plug-in]’s containing div. The class must be predefined in one of the Less files. Separate multiple classes with a space.

_layout (string): This defines the horizontal position of the component in the block. Acceptable values are full, left or right.

instruction (string): This optional text appears above the component. It is frequently used to guide the learner’s interaction with the component.

ariaQuestion (string): This will be read out by screen readers instead of reading the title, body & instruction fields when focusing on the group or radiogroup.

_attempts (integer): This specifies the number of times a learner is allowed to submit an answer. The default is 1.

_shouldDisplayAttempts (boolean): Determines whether or not the text set in remainingAttemptText and remainingAttemptsText will be displayed. These two attributes are part of the core buttons attribute group. The default is false.

_isRandom (boolean): Setting this value to true will cause the _items to appear in a random order each time the component is loaded. The default is false.

_questionWeight (number): A number which reflects the significance of the question in relation to the other questions in the course. This number is used in calculations of the final score reported to the LMS.

_canShowModelAnswer (boolean): Setting this to false prevents the _showCorrectAnswer button from being displayed. The default is true.

_canShowFeedback (boolean): Setting this to false disables feedback, so it is not shown to the user. The default is true.

_canShowMarking (boolean): Setting this to false prevents ticks and crosses being displayed on question completion. The default is true.

_recordInteraction (boolean) Determines whether or not the learner's answer(s) will be recorded on the LMS via cmi.interactions. Default is true. For further information, see the entry for _shouldRecordInteractions in the README for adapt-contrib-spoor.

_allowsAnyCase (boolean): This setting determines whether or not the learner's input must match the uppercase and lowercase letters of the supplied answer/s. Set to false if case-sensitivity is required for a correct answer. The default is true.

_allowsPunctuation (boolean): This setting determines whether the learner's input may include punctuation characters listed below. The default is true. ) ( ~ _ - = } { : ; * & ^ % £ $ ! # - / , . `

_answers (object array): An optional two-dimensional array of answers that, if provided, eliminates a required ordering. Used with questions of this model: "List the names of seven continents" where order among the seven responses is irrelevant. May be used in combination with _items in order to provide prefixes, suffixes, and placeholders, but _answers should not be provided a second time. Example:

    “_answers”: [
       [“Asia”],
       [“Africa”],
       [“North America”,"N America", "N. America"],
       [“South America”,"S America", "S. America"],
       [Europe],
       [Antartica],
       [Australia]
    ]

_items (object array): Each item represents one text input box for this question and contains values for _answers, prefix, suffix, and placeholder.

_answers (string array): Text value/s that must be matched by the learner's input. Multiple answers can be created to accommodate, for example, variations in spelling. Example:

    "_answers": [
        "2",
        "two"
    ]

prefix (string): Text entered in this setting will appear before the input area.

suffix (string): Text entered in this setting will appear after the input area.

placeholder (string): This text supplies a short hint describing the expected value of the input field.

_feedback (object): If the Tutor extension is enabled, these various texts will be displayed depending on the submitted answer. _feedback contains values for three types of answers: correct, _incorrect, and _partlyCorrect. Some attributes are optional. If they are not supplied, the default that is noted below will be used.

title (string): Title text for the feedback that will be displayed when the question is submitted.

altTitle (string): This will be read out by screen readers as an alternative title if no visual title is included.

correct (string): Text that will be displayed when the submitted answer is correct.

_incorrect (object): Texts that will be displayed when the submitted answer is incorrect. It contains values that are displayed under differing conditions: final and notFinal.

final (string): Text that will be displayed when the submitted answer is incorrect and no more attempts are permitted.

notFinal (string): Text that will be displayed when the submitted answer is incorrect while more attempts are permitted. This is optional—if you do not supply it, the _incorrect.final feedback will be shown instead.

_partlyCorrect (object): Texts that will be displayed when the submitted answer is partially correct. It contains values that are displayed under differing conditions: final and notFinal.

final (string): Text that will be displayed when the submitted answer is partly correct and no more attempts are permitted. This is optional—if you do not supply it, the _incorrect.final feedback will be shown instead.

notFinal (string): Text that will be displayed when the submitted answer is partly correct while more attempts are permitted. This is optional—if you do not supply it, the _incorrect.notFinal feedback will be shown instead.

Accessibility

Text Input has been assigned a label using the aria-label attribute: ariaRegion. This label is not a visible element. It is utilized by assistive technology such as screen readers. Should the region's text need to be customised, it can be found within the globals object in properties.schema.

Note to developers: Text Input varies slightly from other Adapt question components in that the answer object does not have a _isCorrect. Only one answer object is supplied and its values determine which responses are correct.

Limitations

No known limitations.


adapt learning logo Author / maintainer: Adapt Core Team with contributors Accessibility support: WAI AA RTL support: Yes Cross-platform coverage: Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, Safari 12+13 for macOS/iOS/iPadOS, Opera

adapt-contrib-textinput's People

Contributors

andrewhosgood avatar brian-learningpool avatar cajones avatar chris-steele avatar chucklorenz avatar dancgray avatar darylhedley avatar dependabot[bot] avatar eleanor-heath avatar guywillis avatar himanshu1618 avatar joe-allen-89 avatar joe-replin avatar kevadsett avatar kirsty-hames avatar lc-thomasberger avatar lemmyadams avatar lukaszgrela avatar moloko avatar nayankhedkar avatar olaoluwam avatar oliverfoster avatar olivermartinfoster avatar sarveshwar-gavhane avatar semantic-release-bot avatar stevex avatar swashbuck avatar taylortom avatar tomgreenfield avatar zenduo avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

adapt-contrib-textinput's Issues

Text box size

Would I need to fork this and adapt to create a wrapped text box component rather than a single text field to make it easier for the learner to review there in-putted answer in relation to the 'model answer'

Compile prefix and suffix

Subject of the issue

In _items, prefix and suffix are not compiled. This prevents using mixins like a11y_alt_text.

BEM Naming - inconsistent between plugins

Following similar inconsistent BEM naming in other plugins (Accordion / GMCQ), the TextInput naming convention should be changed to follow suit.

e.g.

Current:
.matching_item
.matching__item-textbox-container

Proposed:
.matching-item
.matching-item__textbox-container

accessibility: Add correct +/ incorrect aria labels to ticks and crosses

Subject of the issue/enhancement/features

Tick and cross icons do not contain aria labels.

Relates to adaptlearning/adapt_framework#2241

Your environment

  • Framework 5.22.3

Steps to reproduce

  1. Incorrectly complete a TextInput component
  2. Toggle between Show Correct Answer and Show My Answer

Expected behaviour

The tick and cross icons should have aria labels indicating if they represent correct or incorrect.

Actual behaviour

No aria labels

Normalize icons globally

Subject of the issue/enhancement/features

Not a bug, but more housecleaning. Looking to ensure all icons in every template are uniform and set up with the same structure with the appropriate aria hidden label.

<span className="component-item__icon" aria-label="ARIA Description.">
  <span className="icon" aria-hidden="true"></span>
</span>

Wrong answer is not shown on course revisit

Adapt FW v5.22.6 | Text input v7.2.1

When user type wrong answer, after revisiting course that answer is not shown, insted asterisks are shown. This is not the case with correct answer. I'm not sure is this regular behavior or not.
It is happening on scorm environment (revisit) or on local environment, /scorm_test_harness.html, (on page refresh).
In my case component is used as an assessment question where show "Show marking" is enabled in assessment extension.

Correct answered question and revisited shows this (correct behavior):
image

Wrong answered question and revisited shows this:
image

Optional _answers has feedback error

On develop branch using optional _answers results in incorrect feedback and showCorrectAnswer.

Feedback only shows partly correct when all are correct.

showCorrectAnswer function only looks at answers in _items.

duplicate id references

_id is not being found. Notice how ids have values of "-0" instead of "c-105-0". Affects inputs and their labels:

image

Consequently, duplicate ids are being created.

No correct answer

I am trying to see how to implement when there is no correct answer just a model answer which would be displayed on submit and as a non scoring object the learner would simply compare their answer to the model one.

Validation issues for generic _answers in authoring tool schema

There should be the same number of items in the generic _answers array as in the _items array. I don't think it is currently possible to validate this in the authoring tool schemas.

It may be better to refactor this functionality, e.g "_answersInAnyOrder": true/false.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.