NOTÍCIES

Actualment hi ha un problema en Moodle que afecta la visualització de determinades activitats H5P.

La solució provisional és entrar en la pàgina d’edició de l’activitat i fer clic en el botó de guardar els canvis sense fer cap modificació. Això refresca el contingut emmagatzemat en les memòries cau i força la visualització de l’activitat.

Quan estiga solucionat el problema per part de Moodle aplicarem l’actualització corresponent. Mentrestant, no podem actualitzar les biblioteques H5P. Això pot causar algun problema puntual en activitats H5P creades amb les últimes versions d’exies biblioteques.

Agraïm la vostra comprensió.

JSXGraph és una llibreria JavaScript que permet inserir construccions geomètriques interactives, traçar funcions matemàtiques, generar gràfics i visualitzar dades en qualsevol recurs de text (pàgines, etiquetes, preguntes de qüestionari, etc.), sense necessitat d’instal·lar cap programari addicional.

📌  Nota tècnica: Evitar l'editor TinyMCE i usar preferiblement l'editor de text pla per a evitar que Moodle modifique el codi en guardar.

💡 Consell d'ús
Encara que el seu ús més habitual és en Matemàtiques i Física, JSXGraph pot emprar-se en qualsevol àrea on es necessite comunicar informació de manera gràfica i interactiva.

El codi utilitzat s’especifica a continuació:

 

JXG.Options.slider.snapValues = [-5, -2, -1, 0, 1, 2, 5];
JXG.Options.slider.snapValueDistance = 0.2;

const board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-10, 10, 10, -10], axis: true });

var a = board.create('slider', [[2, -5], [7, -5], [-5, 1, 5]], { name: 'a' });
var b = board.create('slider', [[2, -6], [7, -6], [-5, 0, 5]], { name: 'b' });
var c = board.create('slider', [[2, -7], [7, -7], [-5, 0, 5]], { name: 'c' });

var f = board.create('functiongraph', [(x) => a.Value() * x * x + b.Value() * x + c.Value()]);

var txt = board.create('text', [-9, -5,
 () => JXG.Math.Numerics.generatePolynomialTerm([c.Value(), b.Value(), a.Value()], 2, 'x', 2)
], { fontSize: 18 });
 
 

💡 Consell de productivitat
Es tenen a disposició exemples exportables llestos per a pegar en Moodle, la qual cosa permet reutilitzar construccions sense necessitat d'escriure el codi des de zero.
🔗 Enllaç:
Biblioteca d'exemples exportables: https://jsxgraph.org/share

💡Sabies que pots combinar JSXGraph i STACK en Aules?💡
 Pots crear preguntes matemàtiques interactives on l'estudiant arrossega elements en un gràfic i STACK avalua la seua resposta automàticament.

📌📄 PDF:
En esta guia trobaràs informació més detallada sobre l'ús de JSXGraph en Aules, alguns exemples pràctics perquè els pugues aplicar i la solució a alguns problemes freqüents. Clic ací!

Actualitzar l’estil o afegir noves funcionalitats als recursos de les teues aules virtuals pot resultar molt senzill. Tan sols necessites copiar i pegar el disseny de Bootstrap que més t’agrade en l’editor de text dels recursos de la teua aula virtual.

Bootstrap és un conjunt d’estils i components visuals llestos per a usar que permet millorar l’aspecte de qualsevol pàgina web sense necessitat d’escriure CSS des de zero.

En Aules, Bootstrap ja està inclòs en el tema visual de la plataforma, la qual cosa significa que les seues classes estan disponibles directament en qualsevol recurs que permeta editar HTML: pàgines, etiquetes, seccions del curs, etc.

A continuació, alguns exemples d’estils i components amb el codi perquè els pugues copiar i utilitzar en els teus recursos:

Codi font:

<!-- Informació general (gris fosc) -->
<div class="alert alert-dark" role="alert"><strong>Informació general</strong>
</div>
<!-- Informació general (blava) -->
<div class="alert alert-info">Recorda revisar els materials abans de la classe.
</div>
<!-- Avís de tasca o termini (groc) -->
<div class="alert alert-warning"><strong>Lliurament:</strong> Puja el teu
  treball abans del diumenge a les 23.59 h.</div>
<!-- Confirmació o assoliment (verd) -->
<div class="alert alert-success">Unitat completada! Ja pots passar al següent
  bloc.</div>
<!-- Avís crític (roig) -->
<div class="alert alert-danger">Esta activitat és <strong>obligatòria</strong>
  per a superar el mòdul.</div>

Codi font:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <h5>Teoria</h5>
      <p>Enllaç als apunts del tema 1.</p>
    </div>
    <div class="col-md-6">
      <h5>Pràctica</h5>
      <p>Exercicis per a entregar esta setmana.</p>
    </div>
  </div>
</div>

Codi font:

<div class="card mb-3" style="border-left: 4px solid #6F42C1;">
 <div class="card-body">
 <h5 class="card-title"> Unitat 2: La cèl·lula</h5>
 <p class="card-text">
 Estudiarem l'estructura cel·lular, els orgànuls
 i els processos de divisió cel·lular.
 </p>
 <a href="#" class="btn btn-outline-primary btn-sm">Veure continguts</a>
 </div>
</div>

I un exemple de l’estil “Cards”. Només has de reemplaçar el src de la imatge, el títol, el text i l’enllaç del botó.

Codi font:

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Codi font:

<!-- CAPÇALERA DEL BLOC -->
<div class="p-3 mb-4 rounded" style="background:#EDE7F6; border-left:5px solid #6F42C1;">
 <h4 style="color:#3D1D6E; margin:0;">📖 Bloc 1 — Títol del tema</h4>
</div>

<!-- AVÍS IMPORTANT -->
<div class="alert alert-warning">
 <strong>Recorda:</strong> El lliurament és el divendres a les 23.59 h.
</div>

<!-- DOS COLUMNES: teoria i pràctica -->
<div class="container-fluid px-0">
 <div class="row">
   <div class="col-md-6">
     <div class="card h-100 shadow-sm">
       <div class="card-body">
         <h5 class="card-title">📘 Teoria</h5>
         <p class="card-text">Apunts i materials de lectura.</p>
       </div>
     </div>
   </div>
   <div class="col-md-6">
     <div class="card h-100 shadow-sm">
       <div class="card-body">
         <h5 class="card-title">✏️ Pràctica</h5>
         <p class="card-text">Exercicis i activitats d'esta setmana.</p>
       </div>
     </div>
   </div>
 </div>
</div>

<!-- SEPARADOR -->
<hr class="my-4">
<p class="text-center text-muted small">— Fi del Bloc 1 —</p>

📌📄 PDF:
En este document trobaràs informació més detallada sobre l'ús de Bootstrap en Aules i la solució de problemes freqüents. Clic ací!

🔗 Enllaç:
En la web de Bootstrap pots trobar molts exemples més: https://getbootstrap.com/docs/