Workshop Kit · referencia del widget
Publicadovoice-slider
Tres controles que capturan la voz de marca del operador — formalidad (formal ↔ casual), época (clásico ↔ moderno), calidez (conciso ↔ cálido). Cada pista lleva una frase de muestra pre-escrita en ambos extremos para que el operador pueda escuchar cómo suena cada posición antes de comprometerse. Escribe voice: { formality, era, warmth } en MuntinContext.
Demo en vivo
Arrastra cada control. La frase de muestra abajo se mueve al extremo al que la posición está más cerca. La región polite en vivo anuncia "Voz formalidad: 70% — <muestra>" para que los usuarios de lector de pantalla escuchen el significado, no solo el número.
Tres ejes con muestras del dominio restaurantero
Contrato
Sin atributos data más allá de data-widget. Los ejes son fijos (formalidad / época / calidez); las frases de muestra por eje son requeridas y las escribe el autor de la lección — los ejemplos correctos dependen del encuadre de la lección.
| Campo | Tipo | Propósito |
|---|---|---|
samples.formality.lowRequerido |
cadena | Frase de muestra en el extremo formal del eje formalidad. |
samples.formality.highRequerido |
cadena | Frase de muestra en el extremo casual del eje formalidad. |
samples.era.low / samples.era.highRequerido |
cadena | Frases de muestra en los extremos clásico / moderno. |
samples.warmth.low / samples.warmth.highRequerido |
cadena | Frases de muestra en los extremos conciso / cálido. |
| Todos los campos de muestra | variantes -es |
Cada campo de muestra toma un hermano opcional -es (por ej., samples.formality.low-es) para la copia en español. El widget elige según <html lang> o data-locale. |
Qué escribe: voice: { formality: 0-100, era: 0-100, warmth: 0-100 } en MuntinContext con cada evento input. El generador de la L14 + futuros productos hechos con el Método pueden leer esto para retipear CTAs, scripts de buzón de voz, y plantillas de respuesta de reseñas para que coincidan con la voz del operador. La capa de sync (assets/js/course-config-sync.js) incluye voice en sus claves permitidas para que los operadores con sesión iniciada tengan paridad entre dispositivos.
Marcado
Accesibilidad
- Cada control es un
<input type="range">nativo — el soporte de teclado completo (flechas 1%, PageUp/Down 10%, Home/End 0/100) viene del navegador. - aria-labelledby apunta a la etiqueta del eje, que carga los dos nombres de los extremos ("Formal ↔ Casual") para que el lector de pantalla anuncie el control en contexto.
- Región polite en vivo debajo de los tres ejes anuncia "Voz formalidad: 70% — <muestra>" para que los usuarios AT escuchen la posición Y qué voz lleva esa posición.
- Las etiquetas de los extremos se renderizan en marcas con código de color (rojo óxido para el extremo 'low', verde para el extremo 'high') para que los usuarios con vista vean la dirección sin arrastrar.
Dónde se publica
L13 (reseñas) y L16 (ritmo) leen voice vía contexto para sugerir defaults con tono adecuado en la plantilla de respuesta y la copia de recordatorio del ritmo — la ruta de mejora llega en un commit futuro.
Código fuente
/tools/_shared/workshop/voice-slider.js — ~150 LOC. Exporta { tag, contextKeys, mount, serialize } según el contrato de widgets del Workshop Kit. Tres inputs range nativos; el autor de la lección provee las frases de muestra por eje; el widget hace commit de un objeto plano voice: { formality, era, warmth } con cada evento input.
contextKeys lista 'voice' para que el tree-shaking + seguimiento de dependencias del motor reconozca la escritura. src/lib/course.js CONFIG_ALLOWED_KEYS + assets/js/course-config-sync.js ALLOWED se actualizaron en el mismo commit para que el snapshot tome voice en el sync entre dispositivos.