Plantilla:Calculadora

Documentación de plantilla [ ver ] [ editar ] [ historial ] [ purgar ]

Esta plantilla sirve para crear calculadoras interactivas. Requiere el gadget de calculadora . La calculadora funciona de forma predeterminada. Puede desactivarlo en: Preferencias > Gadgets > Gadgets de plantilla > Habilita la plantilla de calculadora de JavaScript .

Puede utilizar esta plantilla varias veces en una página para crear widgets de entrada; algunos de ellos tendrán fórmulas basadas en otros widgets, como una hoja de cálculo.

Puede utilizar {{ Calculator label }} para marcar el texto como etiqueta para un widget de calculadora.

Las estadísticas de esta plantilla están disponibles en [1]

Ejemplos

{{calculadora|id=a|predeterminado=2|tamaño=4}} × {{calculadora|id=b|predeterminado=2|tamaño=4}} = {{calculadora|id=c|fórmula=a*b|predeterminado=4|tipo=normal}}

produce:

2 × 2 = 4

{{calculadora|id=km|tipo=número|tamaño=9|predeterminado=1.609344|fórmula=millas*1.609344}} km ={{calculadora|id=millas|tipo=número|tamaño=9|predeterminado=1|fórmula=km/1.609344}} millas

produce:

1,609344 km = 1 milla

Calculadora de IMC métrica

Puedes colocar widgets dentro de una wikitable.

{|clase="wikitable" estilo = "float: izquierda; margen-izquierdo:15px;"|+ Métrico|-| {{calculadora etiqueta|Peso|para=pesokg}} || {{calculadora|id=pesokg|talla=3|predeterminado=80}} kg|-| {{calculadora etiqueta|Altura|para=alturacm}} || {{calculadora|id=alturacm|tamaño=3|predeterminado=160}} cm|-| IMC || '''{{calculadora|id=bmimetric|type=plain|formula=round(pesokg/peso(alturacm/100,2))|predeterminado=31|estilo=min-width:3ch;display:inline-block}} kg/m<sup>2</sup>'''|}

Calculadora de IMC imperial

También puedes colocar widgets dentro de una tabla HTML.

<tabla clase="wikitabla"><tr><td>Imperial</td></tr><tr><td>Peso</td><td>{{calculadora|id=peso|talla=3}} libras</td></tr><tr><td>Altura</td><td>{{calculadora|id=alturaPies|talla=1}} pies {{calculadora|id=alturaPulgadas|talla=2}} pulgadas</td></tr><tr><td>IMC</td><td>'''{{calculadora|id=imc|type=plain|formula=round(100*peso*703/pow(alturaPies*12+alturaPulgadas,2))/100}} kg/m<sup>2</sup>'''</td></tr></tabla>

Otro

mdwiki:puntuación CHA2DS2–VASc

Botones

Al presionarlo, el {{ botón de calculadora }} actualiza un campo de formulario.

{{botón de calculadora|contents=¡Haz clic en mí!|for=buttoncount|formula=buttoncount+1|type=plain}}Se ha hecho clic en el botón {{calculator|type=plain|default=0|id=buttoncount}} veces.

¡Haz click en mi!

El botón ha sido hecho clic 0 veces.

Etiquetas

Una {{ etiqueta de calculadora }}

Agrega una etiqueta de texto a un widget de calculadora, mejorando su accesibilidad
Al hacer clic, se enfoca en el widget de entrada, especialmente útil para widgets pequeños.
selecciona/deselecciona una casilla de verificación/objetivo de radio.

{{calculator|type=checkbox|id=checklabelex}} {{calculator label|label=Haga clic en esta etiqueta|for=checklabelex}}

Por favor haga clic en esta etiqueta

Fórmula

Las fórmulas utilizan una sintaxis matemática normal, con palabras en inglés que representan otros cuadros de entrada. Por ejemplo, sin(1+foo*2) multiplicaría el cuadro foo por 2, sumaría 1 y tomaría el seno del total. Todos los cálculos se realizan utilizando números de punto flotante de doble precisión IEEE 754 .

Operadores soportados

Los operadores admitidos incluyen: +, -, *, ×, /, ÷, % (el porcentaje es el operador de módulo). La exponenciación debe utilizar la función pow().

Funciones matemáticas

Las funciones matemáticas admitidas incluyen: 'abs', 'acos', 'acosh', 'asin', 'asinh', 'atan', 'atan2', 'atanh', 'ceil', 'cos', 'cosh', 'exp', 'floor', 'hypot', 'log', 'log10', 'log2', 'max', 'min', 'pow', 'random', 'sign', 'sin', 'sinh', 'sqrt', 'tan', 'tanh', 'trunc'

Tienen la misma definición que en JavaScript. En particular, eso significa que log() es log base-e. La excepción es round, para el cual usamos nuestra propia definición.

Funciones adicionales

Se admiten las siguientes funciones adicionales que no pertenecen a la biblioteca matemática de JavaScript:

y: Lógico y de todos los argumentos (puede aceptar más de 2). Este operador genera un cortocircuito como lua y devuelve el primer argumento falso. Enciérrelo en bool() si desea un 1 o un 0
Booleano: Devuelve 0 si el valor está muy cerca de 0 o NaN, de lo contrario, 1
juntarse: devuelve el primer argumento que no es NaN.
si entre: Devuelve el cuarto o quinto argumento dependiendo de si el primer argumento está entre el segundo o el tercer argumento. La comparación no es difusa. Los dos últimos argumentos son opcionales y los valores predeterminados son 1 y 0 respectivamente.
si es igual: Si el primer y el segundo argumento son iguales, se tiene en cuenta el error de punto flotante. Los dos últimos argumentos son opcionales y los valores predeterminados son 1 y 0 respectivamente.
iffinito: Si el primer argumento es finito, se devuelve el segundo argumento; de lo contrario, se devuelve el tercer argumento. Los dos últimos argumentos son opcionales y los valores predeterminados son 1 y 0 respectivamente.
si mayor: Devuelve el tercer o cuarto argumento dependiendo de si el primer argumento es > el segundo. La comparación es difusa para tener en cuenta el error de punto flotante. Usa ifpositive() si no lo deseas. Los dos últimos argumentos son opcionales y los valores predeterminados son 1 y 0 respectivamente.
si mayor o igual: Devuelve el tercer o cuarto argumento dependiendo de si el primer argumento es >= el segundo argumento. La comparación es difusa para tener en cuenta el error de punto flotante. Usa ifpositive() si no lo deseas. Los dos últimos argumentos son opcionales y los valores predeterminados son 1 y 0 respectivamente.
Sin embargo: Devuelve el tercer o cuarto argumento dependiendo de si el primer argumento es < el segundo argumento. La comparación es difusa para tener en cuenta el error de punto flotante. Usa ifpositive() si no lo deseas. Los dos últimos argumentos son opcionales y los valores predeterminados son 1 y 0 respectivamente.
simenosoigual: Devuelve el tercer o cuarto argumento dependiendo de si el primer argumento es <= el segundo argumento. La comparación es difusa para tener en cuenta el error de punto flotante. Usa ifpositive() si no lo deseas. Los dos últimos argumentos son opcionales y los valores predeterminados son 1 y 0 respectivamente.
Ifán: Si el primer argumento no es un número (NaN), se devuelve el segundo argumento; de lo contrario, se devuelve el tercer argumento. Los dos últimos argumentos son opcionales y los valores predeterminados son 1 y 0 respectivamente.
si es positivo: Si el primer argumento es ≥ 0, devuelve el segundo; de lo contrario, devuelve el tercero. Tenga en cuenta que esto no tiene en cuenta el redondeo de punto flotante. Puede utilizar esto si necesita un control preciso sobre la comparación. Los dos últimos argumentos son opcionales y los valores predeterminados son 1 y 0 respectivamente.
si cero: Si el primer argumento está a épsilon de cero, se devuelve el segundo argumento; de lo contrario, el tercer argumento. Los dos últimos argumentos son opcionales y los valores predeterminados son 1 y 0 respectivamente.
índice: Permite tratar las variables como una matriz con un índice evaluado en tiempo de ejecución. index( foo, 2+3 )es lo mismo que foo5. El primer argumento debe ser un identificador (el índice anidado no está permitido). El segundo argumento debe evaluarse como un entero mayor o igual a 0. Si alguno de estos dos argumentos no es válido, se devuelve NaN. El tercer argumento se devuelve si los argumentos son válidos pero el resultado hace referencia a una variable que no existe. Si no se especifica, el tercer argumento toma como valor predeterminado NaN.
ronda de js: Utilice javascript round. Esto redondea la mitad hacia el infinito positivo con una precisión de 0. Consulte la documentación de mdn
no: Devuelve 1 si el valor está muy cerca de 0 o NaN, de lo contrario, 0
o: Lógico o de todos los argumentos (puede aceptar más de 2). Este operador genera un cortocircuito como lua y devuelve el primer argumento verdadero. Enciérrelo en bool() si desea un 1 o un 0
redondo: Una función de redondeo. A diferencia de round() de javascript, esta implementa el redondeo a la mitad de cero ("redondeo comercial"). Se necesita un segundo argumento opcional para indicar a cuántos dígitos decimales se debe redondear. Por ejemplo, round( 3.125, 2 ) = 3.13, round( -3.125, 2 ) = -3.13.
xor: O lógica exclusiva. Solo puede aceptar 2 argumentos y siempre devuelve 1 o 0.

Números

Los números pueden ser

números enteros
decimales
Notación científica. Por ejemplo: 1, 2,84543, 3,12E6, -5, 3,45×10⁻⁴⁵

Constantes admitidas

Infinidad
-Infinidad
Yaya
pi
π
Épsilon

Alcance

Si los widgets de la calculadora están contenidos dentro de un elemento con la clase calculator-container, entonces los identificadores se limitan a este elemento. Esto le permite usar los mismos identificadores varias veces en la misma página sin que interfieran entre sí. Si el elemento de alcance tiene el atributo data-calculator-refresh-on-load="true", entonces los widgets de la calculadora se actualizan en la primera carga de la página antes de que el usuario interactúe con ellos. Tenga en cuenta que las etiquetas no se ven afectadas por el alcance y probablemente se dirigirán al siguiente elemento del documento que tenga el identificador correcto.

Por ejemplo:

<div class="calculator-container" actualización-de-la-calculadora-de-datos-al-cargar="true">{{etiqueta de calculadora|campo de alcance:}} {{calculadora|tipo=texto|id=campo de alcance|predeterminado=3.14}}<br>Esta fórmula se actualiza antes de la interacción del usuario: {{calculator|type=plain|formula=scopedfield|default=No value}}</div>Esta fórmula no se actualiza porque está en un ámbito diferente: {{calculator|type=plain|formula=scopedfield|default=No value}}

Produce lo siguiente:

scopedfield: 3.14
Esta fórmula se actualiza antes de la interacción del usuario: Sin valor

Esta fórmula no se actualiza incluso después de la interacción del usuario porque está en un ámbito diferente: Sin valor

En lugar de utilizar las clases CSS directamente, también puedes usar {{ Calculator ifenabled }} con el parámetro scoped.

CSS

Puede utilizar CSS para ajustar la visualización, ya sea a través de TemplateStyles o estilos en línea.

Para las casillas de verificación y los botones de opción, puede utilizar el pseudo selector :checked. Esto puede resultar muy útil cuando se combina con selectores CSS similares (~) o :has()
Puede buscar los nombres de clase calculator-value-true y calculator-value-false. Esto resulta especialmente útil con el tipo de campo passthru. Consulte {{ Calculator-hideifzero }} para ver un ejemplo.
Puede seleccionar el data-calculator-field-valueatributo como objetivo, por ejemplo, #calculator-field-fieldidhere[calculator-field-scopedfield^="3."] seleccionaría el campo si es >= 3.0 y < 4.0.
Puede utilizar variables CSS para cálculos más complejos (solo en estilos en línea)

Algunos ejemplos:

Ajustar el color del borde : 30

Superponer una imagen con coordenadas basadas en un widget de calculadora:

Altura: 178 cm. Cintura: 155 cm.

Códice

Es posible crear widgets en estilo MediaWiki (Codex) en lugar de en estilo OS. Puedes usar la mayoría de los widgets de Codex que tienen una versión solo CSS. Consulta https://doc.wikimedia.org/codex/latest/components/demos/

Muchos widgets de estilo códice tienen plantillas independientes. Al crear una etiqueta, la plantilla {{ Calculator label }} tiene un parámetro para generar una etiqueta de estilo códice

Consulte las páginas de documentos de plantilla individuales para ver todas las opciones.

Retroceder

Los usuarios que no tengan el gadget habilitado en sus preferencias o que tengan JS deshabilitado, no verán los cuadros de entrada. En su lugar, solo verán el valor predeterminado para cada cuadro. Con una buena elección del valor predeterminado, esto puede ser suficiente.

Por ejemplo, si tienes ''sin({{calculator|id=sine|type=text|default=0.5|size=4}}π)={{calculator|type=plain|default=1.00|decimals=2|formula=sin(sine*π)|id=sineres}}'' para hacer que sin( 0.5 π)= 1.00 , el usuario que no use js perderá la interactividad, pero aún verá la ecuación.

Si desea alternativas más sofisticadas, puede utilizar las clases CSS calculatorgadget-enabledy .calculatorgadget-fallback

<div class="calculatorgadget-enabled" style="display:none">Este texto solo se muestra si el gadget está habilitado. {{calculator|type=text|size=20|default=100|id=xyz}} </div><div class="calculatorgadget-fallback">Este texto solo se muestra si el gadget está deshabilitado</div>

Lo cual produce:

Este texto solo se muestra si el gadget está habilitado. 100

Este texto solo se muestra si el gadget está deshabilitado

Alternativamente, puede utilizar la plantilla {{ Calculator ifenabled }} para hacer esto.

Argumentos de plantilla

Para todo tipo

identificación: El identificador de este campo, solo caracteres en inglés , se utiliza en fórmulas de otros campos. Debe ser único en la página. Se puede omitir si el campo no se utiliza como valor en ninguna fórmula.
por defecto: El valor inicial
fórmula: La fórmula para calcular este campo. Consulte más arriba lo que se admite
marcador de posición: Texto de marcador de posición que aparece en gris claro cuando no hay ninguna entrada
Sólo lectura: Hacer que el campo sea de sólo lectura
tamaño: ¿Qué tan grande debe ser el cuadro de entrada (en términos de la cantidad de letras que pueden caber en el cuadro)?
estilo: CSS personalizado para usar en el elemento.
clase: Clase extra para agregar al elemento
clase en vivo: Clase CSS que se agrega solo si el gadget está activo en la página. Se agrega después de que se procesan los widgets.
tipo: Tipo de campo. Los tipos de campo admitidos actualmente son número, texto, sin formato, opción de radio, casilla de verificación, rango, oculto y de paso.

Las casillas de verificación, los campos ocultos, los de acceso directo y los de opción pueden resultar útiles en combinación con TemplateStyles para ocultar y mostrar campos; consulte Template:Body_roundness_index , Template:BMI calculator2/bmi.css y template:Calculator-hideifzero para ver ejemplos. Consulte también la sección #Codex anterior para ver cómo estos tipos de campos pueden verse diferentes en el modo Codex.

Solo para tipos de números y rangos

máximo: Número máximo permitido (solo tipo de número)
mín.: Número mínimo permitido (solo tipo de número)
paso: Qué tan grande es el intervalo para las entradas de tipo=número y tipo=rango. Puede ser un número o el valor "cualquiera"

Solo para tipo de radio

nombre: Cuando se utiliza type=radio, el nombre del grupo de radio.

Para tipografía simple y de texto

decimales: Formatear el campo con esta cantidad de dígitos decimales. (Solo funciona con type=plain y type=text)
precisión exponencial: Formatear el campo con esta cantidad de dígitos significativos en notación científica. (Solo funciona con type=plain y type=text)
NaN-text: Utilice este texto en lugar de NaN cuando el resultado no sea un número (solo funciona type=plain y type=text)
precisión: Formatear el campo con esta cantidad de dígitos significativos. (Solo funciona con type=plain y type=text)

Añade un widget de calculadora a la página. Al igual que una hoja de cálculo, puedes consultar otros widgets en la misma página.

La documentación anterior se transcluye desde la plantilla:Calculator/doc . ( editar | historial )
Los editores pueden experimentar en las páginas sandbox (crear | reflejar) y testcases (crear) de esta plantilla .
Agregue categorías a la subpágina /doc . Subpáginas de esta plantilla .