html - Casilla de verificación en la que se puede hacer clic en Markdown

En Markdown usando <input type="casilla de verificación"/> o - [] me aparecerá un cuadro blanco, que no se puede marcar haciendo clic. ¿Alguna idea de cómo implementar allí una casilla de verificación en la que se puede hacer clic para obtener documentación de progreso? Supongo que necesito una extensión, pero ¿cuál funciona para jupyterlab?

Ejemplo:

[] haz esto y aquello y luego haz aquello (texto más largo) [ ] otro texto largo [] haga clic para documentar su progreso, colóquelo después de finalizar la tarea, no es necesario guardar las marcas de verificación.

------------------------------------

mientras - [ ] muestra casillas de verificación vacías, - [x] se representará como una casilla de verificación marcada. Aquí hay una demostración en GitHub'sabor:

- [ ] unchecked
- [x] checked

que se representará como:

Tenga en cuenta que elementos como los botones de opción HTML y las casillas de verificación, aunque son interactivos, no son cambios permanentes en su documento a menos que tenga un código de fondo para guardar los cambios cambiando las etiquetas HTML.

Mira esto:

label {
  padding-left: 5px;
}

input {
  float: left;
}

<div>
  <input type="checkbox" name="uchk">
  <label for="uchk">Unchecked.</label>
</div>
<div>
  <input type="checkbox" name="chk" checked>
  <label for="chk">Checked.</label>
</div>

Además, no creo que realmente quieras que tu documento de rebajas tenga casillas de verificación en las que se pueda hacer clic, se reduce la inmersión y, además, si van a ser permanentes, es fácil para cualquiera cambiarlas.

2

1

Sé que puedo verificarlos manualmente escribiendo una x, pero realmente necesito que se verifiquen de forma interactiva mediante un clic para los usuarios que no ven el código Markdown sin formato. Sé que en el código HTML es posible tener casillas de verificación, pero necesito tenerlas en una celda de rebajas ejecutada en Jupterlab, allí tu ejemplo y el mío no se pueden activar mediante un clic

- usuario23657

31 de marzo de 2021 a las 18:58

@user23657 No creo que esto se pueda lograr de esta manera. Sugiero convertir su proyecto en una página web para esto, porque incluso si lo logra'lo más probable es que sea una forma complicada y que no sea realmente fácil de mantener. Sin embargo, haga un seguimiento si encuentra una solución. He marcado tu pregunta como favorita. Dado que estás usando Python, es posible que desees marcar flask o django como tu solución backend.

- M.H. Tajaddini

1 de abril de 2021 a las 14:27

------------------------------------

Una opción es usar ipywidgets, que es una biblioteca de Python que proporciona widgets de formulario específicamente para Jupyter Notebook/Labs.

Para mostrar una casilla de verificación:

from ipywidgets import Checkbox
mycheckbox = Checkbox()
display(mycheckbox)

Esto mostrará una casilla de verificación, que puede marcar y desmarcar. hSin embargo, el estado de la casilla de verificación no se guardará. Cada vez que vuelvas a ejecutar el cuaderno o reinicies el kernel, la casilla de verificación se volverá a crear con su valor predeterminado (Falso).

Si desea que la casilla de verificación se cree con un valor guardado, debe obtener ese valor y pasarlo al crear la casilla de verificación.

mycheckbox = Checkbox(value=myvalue)

Pero, por supuesto, primero debes recuperar ese valor. También debe guardar el valor cuando cambie para poder recuperarlo la próxima vez. Para el siguiente ejemplo, he utilizado un archivo JSON para almacenar el valor. Por supuesto, el ejemplo podría adaptarse para utilizar cualquier método válido para almacenar datos persistentes.

Supongamos que tenemos un archivo llamado data.json que contiene lo siguiente:

{"item": true}

Luego, en nuestro cuaderno, ejecutamos este código Python:

from ipywidgets import Checkbox
import json

with open('data.json', 'r') as f:
    data = json.load(f)

item = Checkbox(value=data['item'], description='item')

def on_value_change(change):
    key = change['owner'].description
    value = change['new']
    
    data[key] = value
    with open('data.json', 'w') as f:
        json.dump(data, f)

item.observe(on_value_change, names='value')
display(item)

Analicemos eso.

Primero cargamos los datos JSON en Python dict: data.

with open('data.json', 'r') as f:
    data = json.load(f)

Luego creamos la casilla de verificación, utilizando el valor obtenido del archivo JSON.

item = Checkbox(value=data['item'], description='item')

Pero también necesitamos detectar cualquier cambio en la casilla de verificación. Entonces necesitamos definir un controlador de cambios.

def on_value_change(change):
    key = change['owner'].description
    value = change['new']
    
    data[key] = value

    with open('data.json', 'w') as f:
        json.dump(data, f)

Las dos primeras líneas obtienen el nombre del artículo y el nuevo valor. Luego actualizamos los datos con el nuevo valor. Finalmente, escribimos los datos actualizados en nuestro archivo JSON.

Finalmente, debemos indicarle a la casilla de verificación acerca de nuestro controlador pasándolo al método observe:

item.observe(on_value_change, names='value')

Tenga en cuenta que pasamos nombres='valor' para observar de modo que solo se reciban los cambios en el valor (cualquier otra cosa se ignorará).

A continuación se muestra una versión ligeramente modificada que imprime información informándole cada vez queEl archivo de datos se actualiza:

from ipywidgets import Checkbox, Output
import json

with open('data.txt', 'r') as f:
    data = json.load(f)

item = Checkbox(value=data['item'], description='item')
out = Output()

@out.capture()
def on_value_change(change):
    key = change['owner'].description
    value = change['new']
    
    print(f'Saving value: "{{ \'{key}\': {value} }}"')
    
    data[key] = value
    with open('data.txt', 'w') as f:
        json.dump(data, f)

item.observe(on_value_change, names='value')
display(item)
display(out)

Ejecútalo y cada vez que hagas clic en la casilla de verificación, se imprimirá un mensaje debajo mostrando lo que se guardó.

Saving value: "{ 'item': False }"
Saving value: "{ 'item': True }"
Saving value: "{ 'item': False }"

Puede resultar útil para fines de depuración. Al agregar más declaraciones impresas, puede determinar qué otra información está contenida en la variable de cambio. lo que puede ayudar a adaptarlo a sus necesidades.

4

Gracias por la respuesta detallada. Para mí no es ningún problema que los valores no se guarden en general, pero es una buena solución con json. Preferiría tenerLas casillas de verificación en una celda de rebajas, ya que habrá mucho texto y luego el usuario no verá ningún código, ¿hay alguna manera de integrar widgets allí o alguna extensión para esto?

- usuario23657

2 de abril de 2021 a las 11:50

Una celda de Markdown se representa como HTML. Básicamente, podrías hacer lo mismo en JavaScript para guardar el estado de las casillas de verificación

- Waylan

2 de abril de 2021 a las 14:05

Está bien, incluso si lo coloco en una celda de código, la longitud de las etiquetas es limitada, por lo que si necesito un texto más largo junto a la casilla de verificación, no se mostrará por completo. ¿Existe alguna solución para eso?

- usuario23657

2 de abril de 2021 a las 15:16

con la solución aquí no puedo tener texto multilínea, además insertar \n no ayuda

- usuario23657

2 de abril de 2021 a las 17:22

------------------------------------

Puedes integrarcalificar HTML <input type="radio"/> en su lugar, y cambie el estilo para que parezca una casilla de verificación.

Respondido

31 de marzo de 2021 a las 9:22

Mentroz

Mentroz

11

2

2 insignias de bronce

2

Hasta donde yo sé, con la radio solo es posible elegir una cosa a la vez. Además, tengo el mismo problema de que no se activa al hacer clic

- usuario23657

31 de marzo de 2021 a las 10:08

Creo que @Mentroz solo usa la radio como ejemplo. ¿Por qué no pruebas con la casilla de verificación?

- jtlz2

25/10/2023 a las 11:03