diff --git a/.actirepo/activity.py b/.actirepo/activity.py index 2eec0e5..ecc4a7a 100644 --- a/.actirepo/activity.py +++ b/.actirepo/activity.py @@ -5,14 +5,17 @@ import json import xml.etree.ElementTree as ET import mimetypes +import io +import base64 from __init__ import __icons_url__, __download_url__ from jinja2 import Environment, FileSystemLoader from url_utils import normalize, encode -from image_utils import html2png +from image_utils import html2png, htmlsize from file_utils import slugify, is_newer_than, anchorify from bs4 import BeautifulSoup from pprint import pprint +from PIL import Image ACTIVITY_FILE = 'activity.json' SUPPORTED_TYPES = { @@ -85,9 +88,19 @@ def _get_questions(activity): def _is_activity(path): return os.path.isdir(path) and os.path.isfile(os.path.join(path, ACTIVITY_FILE)) +# get mimetype from file def _get_mimetype(file): + if file is None: + return None return mimetypes.types_map[os.path.splitext(file.get('name'))[1]] +# get image dimensions +def _get_image_size(file): + if file is None: + return None + with Image.open(io.BytesIO(base64.decodebytes(bytes(file.text, "utf-8")))) as img: + return img.size + # process attachments in question element def _process_attachments(element): attachments = [ @@ -106,6 +119,16 @@ def _process_attachments(element): img['src'] = attachment.get('image') return html.prettify() +# get size of text +def _drop_text_size(text): + html = f""" +
+
{text}
+
{text}
+
+ """ + return htmlsize(html) + # render question as image def _render_image(question, destination_dir): type = question.get("type") @@ -171,6 +194,33 @@ def _render_image(question, destination_dir): "icon": f"{__icons_url__}/crosshairs.png" } ) + case "ddimageortext": + background_file = question.find('file') + question_data.update( + { + "background": f"data:{_get_mimetype(background_file)};{background_file.get('encoding')},{background_file.text}", + "drags": { + int(drag.find('no').text) : { + "no": int(drag.find('no').text), + "text": drag.find('text').text, + "type": "text" if drag.find('file') is None else "image", + "image": f"data:{_get_mimetype(drag.find('file'))};{drag.find('file').get('encoding')},{drag.find('file').text}" if drag.find('file') is not None else None, + "size": _drop_text_size(drag.find('text').text) if drag.find('file') is None else _get_image_size(drag.find('file')), + "draggroup": int(drag.find('draggroup').text) + } for drag in question.findall('drag') + }, + "drops": { + int(drop.find('choice').text) : { + "no": int(drop.find('no').text), + "text": drop.find('text').text, + "choice": int(drop.find('choice').text), + "xleft": int(drop.find('xleft').text), + "ytop": int(drop.find('ytop').text) + } for drop in question.findall('drop') + } + } + ) + pprint(question_data) case _: return diff --git a/.actirepo/image_utils.py b/.actirepo/image_utils.py index ac5c39e..18aef93 100644 --- a/.actirepo/image_utils.py +++ b/.actirepo/image_utils.py @@ -1,4 +1,5 @@ import os +import tempfile from html2image import Html2Image from PIL import Image @@ -9,4 +10,16 @@ def html2png(html, destination_dir, img_file): img_file = os.path.join(destination_dir, img_file) im = Image.open(img_file) im = im.crop(im.getbbox()) - im.save(img_file) \ No newline at end of file + im.save(img_file) + +def htmlsize(html): + tmp = tempfile.mkstemp(suffix='.png') + os.close(tmp[0]) + file = tmp[1] + html2png(html, os.path.dirname(file), os.path.basename(file)) + im = Image.open(file) + size = im.size + im.close() + os.remove(file) + return size + diff --git a/.actirepo/templates/ddimageortext.template.html b/.actirepo/templates/ddimageortext.template.html new file mode 100644 index 0000000..6978e7b --- /dev/null +++ b/.actirepo/templates/ddimageortext.template.html @@ -0,0 +1,30 @@ +
+
+ {{ question.statement }} +
+
+
+ Imagen de fondo para arrastrar marcadores dentro de este +
+ {% for choice, drop in question.drops.items() %} +
vacío 
+ {% endfor %} +
+
+
+ {% for no, drag in question.drags.items() %} + {% if drag.type == 'image' %} +
+ {{ drag.text }} + {{ drag.text }} +
+ {% else %} +
+
{{ drag.text }}
+
{{ drag.text }}
+
+ {% endif %} + {% endfor %} +
+
+
\ No newline at end of file diff --git a/.actirepo/test/README.md b/.actirepo/test/README.md index 98ef055..27650cb 100644 --- a/.actirepo/test/README.md +++ b/.actirepo/test/README.md @@ -32,6 +32,13 @@ Ficheros de preguntas disponibles en esta actividad: | | **TOTAL** | 14 | +#### Arrastrar y soltar sobre una imagen + + +![arrastrar-y-soltar-sobre-una-imagen_0.png](images/arrastrar-y-soltar-sobre-una-imagen_0.png) + + + #### Arrastrar y soltar marcadores diff --git a/.actirepo/test/images/arrastrar-y-soltar-sobre-una-imagen_0.png b/.actirepo/test/images/arrastrar-y-soltar-sobre-una-imagen_0.png new file mode 100644 index 0000000..918858c Binary files /dev/null and b/.actirepo/test/images/arrastrar-y-soltar-sobre-una-imagen_0.png differ diff --git a/redes/cableado/normas T-568A y T-568B/README.md b/redes/cableado/normas T-568A y T-568B/README.md index 0874d50..6f04165 100644 --- a/redes/cableado/normas T-568A y T-568B/README.md +++ b/redes/cableado/normas T-568A y T-568B/README.md @@ -25,6 +25,25 @@ Ficheros de preguntas disponibles en esta actividad: | | **TOTAL** | 12 | +#### Arrastrar y soltar sobre una imagen + + +![01-arrastrar-etiquetas-sobre-conector-con-norma-t-568a_0.png](images/01-arrastrar-etiquetas-sobre-conector-con-norma-t-568a_0.png) + +![02-arrastrar-etiquetas-sobre-conector-con-norma-t-568b_0.png](images/02-arrastrar-etiquetas-sobre-conector-con-norma-t-568b_0.png) + +![03-arrastrar-etiquetas-para-formar-cable-directo-t-568a_0.png](images/03-arrastrar-etiquetas-para-formar-cable-directo-t-568a_0.png) + +![04-arrastrar-etiquetas-para-formar-cable-cruzado_0.png](images/04-arrastrar-etiquetas-para-formar-cable-cruzado_0.png) + +![09-arrastrar-marcadores-a-panel-de-parcheo-t-568a-sin-codigo-colores_0.png](images/09-arrastrar-marcadores-a-panel-de-parcheo-t-568a-sin-codigo-colores_0.png) + +![10-arrastrar-marcadores-a-panel-de-parcheo-t-568a-sin-codigo-colores_0.png](images/10-arrastrar-marcadores-a-panel-de-parcheo-t-568a-sin-codigo-colores_0.png) + +![12-arrastrar-etiquetas-sobre-conector-hembra-rj-45-norma-t-568a_0.png](images/12-arrastrar-etiquetas-sobre-conector-hembra-rj-45-norma-t-568a_0.png) + + + #### Arrastrar y soltar marcadores diff --git a/redes/cableado/normas T-568A y T-568B/images/01-arrastrar-etiquetas-sobre-conector-con-norma-t-568a_0.png b/redes/cableado/normas T-568A y T-568B/images/01-arrastrar-etiquetas-sobre-conector-con-norma-t-568a_0.png new file mode 100644 index 0000000..f830dea Binary files /dev/null and b/redes/cableado/normas T-568A y T-568B/images/01-arrastrar-etiquetas-sobre-conector-con-norma-t-568a_0.png differ diff --git a/redes/cableado/normas T-568A y T-568B/images/02-arrastrar-etiquetas-sobre-conector-con-norma-t-568b_0.png b/redes/cableado/normas T-568A y T-568B/images/02-arrastrar-etiquetas-sobre-conector-con-norma-t-568b_0.png new file mode 100644 index 0000000..809cc47 Binary files /dev/null and b/redes/cableado/normas T-568A y T-568B/images/02-arrastrar-etiquetas-sobre-conector-con-norma-t-568b_0.png differ diff --git a/redes/cableado/normas T-568A y T-568B/images/03-arrastrar-etiquetas-para-formar-cable-directo-t-568a_0.png b/redes/cableado/normas T-568A y T-568B/images/03-arrastrar-etiquetas-para-formar-cable-directo-t-568a_0.png new file mode 100644 index 0000000..3c4ba66 Binary files /dev/null and b/redes/cableado/normas T-568A y T-568B/images/03-arrastrar-etiquetas-para-formar-cable-directo-t-568a_0.png differ diff --git a/redes/cableado/normas T-568A y T-568B/images/04-arrastrar-etiquetas-para-formar-cable-cruzado_0.png b/redes/cableado/normas T-568A y T-568B/images/04-arrastrar-etiquetas-para-formar-cable-cruzado_0.png new file mode 100644 index 0000000..fc7cdd9 Binary files /dev/null and b/redes/cableado/normas T-568A y T-568B/images/04-arrastrar-etiquetas-para-formar-cable-cruzado_0.png differ diff --git a/redes/cableado/normas T-568A y T-568B/images/09-arrastrar-marcadores-a-panel-de-parcheo-t-568a-sin-codigo-colores_0.png b/redes/cableado/normas T-568A y T-568B/images/09-arrastrar-marcadores-a-panel-de-parcheo-t-568a-sin-codigo-colores_0.png new file mode 100644 index 0000000..82e8940 Binary files /dev/null and b/redes/cableado/normas T-568A y T-568B/images/09-arrastrar-marcadores-a-panel-de-parcheo-t-568a-sin-codigo-colores_0.png differ diff --git a/redes/cableado/normas T-568A y T-568B/images/10-arrastrar-marcadores-a-panel-de-parcheo-t-568a-sin-codigo-colores_0.png b/redes/cableado/normas T-568A y T-568B/images/10-arrastrar-marcadores-a-panel-de-parcheo-t-568a-sin-codigo-colores_0.png new file mode 100644 index 0000000..adf51b2 Binary files /dev/null and b/redes/cableado/normas T-568A y T-568B/images/10-arrastrar-marcadores-a-panel-de-parcheo-t-568a-sin-codigo-colores_0.png differ diff --git a/redes/cableado/normas T-568A y T-568B/images/12-arrastrar-etiquetas-sobre-conector-hembra-rj-45-norma-t-568a_0.png b/redes/cableado/normas T-568A y T-568B/images/12-arrastrar-etiquetas-sobre-conector-hembra-rj-45-norma-t-568a_0.png new file mode 100644 index 0000000..a06cb8b Binary files /dev/null and b/redes/cableado/normas T-568A y T-568B/images/12-arrastrar-etiquetas-sobre-conector-hembra-rj-45-norma-t-568a_0.png differ