Blackboard: Certificados personalizados

¿Conocéis la funcionalidad de certificados de Blackboard? Gracias a ella, podemos configurar un curso para que entregue un certificado imprimible (o un badge digital también), que el alumno puede llevarse consigo una vez alcanzado cierto objetivo en un curso.

Los badges o insignias digitales pueden personalizarse, ya que se nos permite cargar una imagen que será utilizada como insignia, abriendo la posibilidad de que la diseñemos nosotros. Los certificados, por otro lado, no son configurables. Se nos ofrecen 3 modelos prediseñados de los que podemos elegir uno, pero ya está. ¿Qué ocurre cuando los certificados por defecto no son suficiente?

Lo que ocurre es que nos toca generar el certificado nosotros mismos. Y para ello necesitaremos JavaScript, y así podremos personalizar ese certificado para cada curso y alumno, fecha, etc. automáticamente. Utilizaremos JavaScript, una imagen que será el borde del certificado, y las variables que Blackboard proporciona (podéis ver una lista de las mismas aquí)

Comenzamos: elemento de texto

Lo primero que vamos a hacer es colocar nuestro certificado en el curso. ¿Dónde? En un elemento de texto, dentro de un área de contenido. Accederemos por tanto a un área de contenido, y pulsaremos Desarrollar contenido. En el menú que aparece, seleccionaremos Elemento.

Daremos un nombre al elemento, por ejemplo "Certificado del curso", y procederemos a añadir el código JavaScript en la vista HTML del editor. Esto es extremadamente importante para que el código se mantenga.

Añadiendo el código

El código podéis copiarlo y pegarlo directamente desde aquí. Guardad el elemento y visualizarlo. Podréis continuar editando hasta que tenga los datos y formato que quereis, pero hay que tener en cuenta que la edición ha de realizarse en un editor de texto como notepad o similar, copiando y pegando el código al completo en el editor de Blackboard, en la vista html. NUNCA editaremos y guardaremos dentro de esa cajetilla, ya que dejará de funcionar.

<script type="text/javascript">
function printCertOfCompletion@X@content.pk_string@X@()
{
  var DocumentContainer = document.getElementById('certOfCompletion@X@content.pk_string@X@');
  /* 8 1/2 x 11 = 612 x 792 */
  var WindowObject = window.open('', 'PrintCert@X@content.pk_string@X@','width=660,height=820,top=50,right=50,status=yes,toolbar=no,toolbars=no,location=no,menubar=yes,directories=no,scrollbars=yes,resizable=yes');
  WindowObject.document.writeln('<html><head>');
  printStyle@X@content.pk_string@X@( WindowObject.document, true );
  WindowObject.document.writeln('</head><body>');
  WindowObject.document.writeln(DocumentContainer.innerHTML);
  WindowObject.document.writeln('</body></html>');
  WindowObject.document.close();
  WindowObject.focus();
  WindowObject.print();
}
/* http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */
function printStyle@X@content.pk_string@X@( theDocument, isPrint )
{
  theDocument.writeln('  <style type="text/css">');
  if( isPrint ) {
  theDocument.writeln('    \u0023outer {height: 792px; width: 100%; overflow: hidden; position: relative;}');
  theDocument.writeln('    \u0023outer[id] {display: table; position: static;}');
  theDocument.writeln('    \u0023middle {width: 100%; position: absolute; top: 50%;} /* for explorer only*/');
  theDocument.writeln('    \u0023middle[id] {display: table-cell; position: relative; vertical-align: middle;}');
  theDocument.writeln('    \u0023inner {position: relative; top: -50%} /* for explorer only */');
  theDocument.writeln('    \u0023inner[id] {position: relative; top: 0%}');
  theDocument.writeln('    /* optional: \u0023inner[id] {position: static;} */');
  }
  theDocument.writeln("    p.p1@X@content.pk_string@X@ {margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 64.0px 'Edwardian Script ITC'}");
  theDocument.writeln("    p.p2@X@content.pk_string@X@ {margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 36.0px 'Edwardian Script ITC'; min-height: 75.0px}");
  theDocument.writeln("    p.p3@X@content.pk_string@X@ {margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 36.0px 'Edwardian Script ITC'}");
  theDocument.writeln("    p.p4@X@content.pk_string@X@ {margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 24.0px 'Edwardian Script ITC'}");
  theDocument.writeln('  </style>');
}
function getDateString() {
  var m_names = new Array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre");
  var d = new Date();
  var curr_date = d.getDate();
  var curr_month = d.getMonth();
  var curr_year = d.getFullYear();
  return (curr_date + " de " + m_names[curr_month] + " de " + curr_year);
}
</script>
<script type="text/javascript">
  printStyle@X@content.pk_string@X@( window.document, false );
</script>
<p><input type=button onclick="printCertOfCompletion@X@content.pk_string@X@()" value='Imprimir certificado'></p>
<div id="certOfCompletion@X@content.pk_string@X@">
<div id="outer">
<div id="middle">
<div id="inner" align="center">
<img src="https://campus.elearningsolutions.es/courses/1/pruebas/content/_2253_1/embedded/borde.png"/>
<p class="p4@X@content.pk_string@X@"><br></p>
<p class="p1@X@content.pk_string@X@">Certificado de participación en el curso</p>
<p class="p4@X@content.pk_string@X@"><br></p>
<p class="p3@X@content.pk_string@X@">Certifico que</p>
<p class="p2@X@content.pk_string@X@">@X@user.full_name@X@</p>
<p class="p3@X@content.pk_string@X@">ha completado el curso</p>
<p class="p2@X@content.pk_string@X@">@X@course.course_name@X@</p>
<p class="p3@X@content.pk_string@X@">el día
<script type="text/javascript">
  document.write(getDateString());
</script></p>
<p class="p4@X@content.pk_string@X@"><br></p>
<p class="p4@X@content.pk_string@X@">Créditos obtenidos: 3</p>
<p class="p4@X@content.pk_string@X@"><br></p>
<img src="https://campus.elearningsolutions.es/courses/1/pruebas/content/_2253_1/embedded/borde.png" />
</div>
</div>
</div>
</div>

Modificando el código: algunas ideas

Algunos elementos son fácimente modificables:

  • El texto que aparece, por ejemplo, lo podemos cambiar directamente en el código para que aparezca tal y como queramos.
  • Para editar los estilos, modificaremos las líneas 
    theDocument.writeln("    p.p1@X@content.pk_string@X@ {margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 64.0px 'Edwardian Script ITC'}");
  • Para cambiar elementos de sitio, cuidaremos de mover las piezas (por ejemplo, el <p> al completo).
  • La fecha se recoge automáticamente, podemos modificar su formato editando la función getDateString() y podemos colocarla donde queramos en el certificado.
  • Podemos cambiar el layout bien con CSS o bien utilizando una tabla sencilla.
  • El fondo del certificado puede modificarse enlazando a un archivo (el que queramos) que esté cargado en un servidor y con acceso público.

Listo. ¿Y ahora?

Ahora nos queda condicionar su visualización para que sólo los alumnos que hayan superado los requisitos puedan ver e imprimir su certificado personalizado.

Para ello utilizamos la versión adaptativa, haciendo que el elemento que genera el certificado sólo sera visible al superar, por ejemplo, el examen final. Podemos utilizar reglas complejas, por supuesto, o de fecha, etc. ya que este condicionamiento es el ofrecido por Blackboard.

Y eso como se ve?

El alumno verá esto, una vez que supere las reglas que diseñemos en la versión adaptativa.

Ahora ya sabéis cómo generar vuestros certificados propios!

 

Escribe un comentario

Plain text

  • No se permiten etiquetas HTML.
  • Las direcciones de las páginas web y las de correo se convierten en enlaces automáticamente.
  • Saltos automáticos de líneas y de párrafos.
CAPTCHA
Esta pregunta es para comprobar si usted es un visitante humano y prevenir envíos de spam automatizado.