https://github.com/capjamesg/fill-mask-web-component

A HTML web component for filling missing words in sentences.
https://github.com/capjamesg/fill-mask-web-component

fill-mask web-component

Last synced: 1 day ago
JSON representation

A HTML web component for filling missing words in sentences.

• Host: GitHub
• URL: https://github.com/capjamesg/fill-mask-web-component
• Owner: capjamesg
• License: mit
• Created: 2023-12-26T16:31:24.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-27T21:32:22.000Z (about 1 year ago)
• Last Synced: 2025-01-27T16:18:19.343Z (6 days ago)
• Topics: fill-mask, web-component
• Language: HTML
• Homepage: https://capjamesg.github.io/fill-mask-web-component/
• Size: 5.86 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# fill-mask-web-component

A HTML web component for filling missing words in sentences.

This component is ideal for making interactive quizzes where the reader needs to fill in a word (i.e. fill in the missing song lyric, fill in the missing word from a quote).

[Try the component](https://capjamesg.github.io/fill-mask-web-component/).

## Demo

Here is an example of the component in use:

https://github.com/capjamesg/fill-mask-web-component/assets/37276661/216ec4ec-2701-4311-a039-72497f3d12dd

## Setup

To use this component, first clone this repository:

```

git clone https://github.com/capjamesg/fill-mask-web-component

cd fill-mask-web-component/

```

Copy the `fillmask.js` file onto your own website.

Add the following code to theweb page where you want to use the component, before you want to use the component:

```html

```

You can then add the component. To do so, add the following code:

```html

```

Replace the `text` attribute with the text you want to add to the page. Use `[word]` to indicate what word you want to mask. You can only specify one word to mask. Then, set the `answer` attribute to be equal to the missing word.

## License

This project is licensed under an [MIT license](LICENSE).