Template:Calculator/Tutorial
| Table of contents | Basic concepts |
{{Calculator}} can be a confusing template to use. The goal of this tutorial is to show people how to create interactive experiences using the calculator template. In contrast to the template reference docs, this tutorial is meant to be more step by step so as to not be as overwhelming.
Basic usage
[edit]If you are not familiar with wiki-syntax, it is recommended to read Help:Templates and Help:Tables first.
- Basic concepts - Start here
- Labels and fallback - Accessibility concerns
- Types of fields - Going beyond just text boxes
- Buttons - Adding clickable buttons
- Combining with CSS - Highlighting and styling content based on calculator
- Scoping - Ensuring that separate calculators don't interfere with each other.
- Cyclic formulas - Having calculator widgets that are dependent on each other.
Advanced Usage
[edit] | This page is under construction Please help review and edit this page. |
This section assumes you have familiarity with CSS and lua and how they are used on wiki via Extension:TemplateStyles and Extension:Scribunto.
- Text content
- Complex CSS
- CSS animations
- Mouse interaction
- Advanced accessibility
- Other calculator functions
See also
[edit]- Concise technical reference - Template:Calculator/doc and Template:Calculator button/doc
- Gallery of examples - w:Template:Calculator/doc/examples
| Table of contents | Basic concepts |