Bootstrap image header with title and coloured bar

It’s not rocket-science but, in case anyone else is looking how to do this, based on this post: http://forums.asp.net/t/2067649.aspx?bootstrap+thumbnail+image+with+text+inside+and+green+big+line+on+the+bottom

calendarandforum

Html:

<div class="row">
 <div class="col-md-6">
  <div class="forum-image header-image">
   <div class="h3 heading-text">FORUM</div>
   <div class="heading-border"></div>
  </div>
  <div class="content-container"></div>
 </div>
 <div class="col-md-6">
  <div class="calendar-image header-image">
   <div class="h3 heading-text">CALENDAR</div>
   <div class="heading-border"></div>
  </div>
  <div class="content-container"></div>
 </div>
</div>

Css:

div.header-image{
 position: relative;
 width:100%;
 height: 150px;
 background-position: center;
 background-size: cover;
}
div.heading-text{
 position: absolute;
 bottom: 10px;
 width: 100%;
 padding: 10px;
 margin: 0px !important;
 opacity: 0.8;
 color: #373737;
 background-color: #d8d8d8;
}
div.heading-border{
 position: absolute;
 bottom: 0px;
 width: 100%;
 height: 10px;
}
div.content-container{
 min-height: 200px;
 margin-bottom: 15px;
 border: 1px solid #cccccc;
 padding: 10px;
}
div.calendar-image{
 background-image: url(../img/calendar.jpg);
}
div.calendar-image div.heading-border{
 background-color: #00147a;
}
div.forum-image{
 background-image: url(../img/students_chatting.jpg);
}
div.forum-image div.heading-border{
 background-color: #be0f35;
}

Acknowledgements

Calendar image by Dafne Cholet under Creative Commons Attribution 2.0 Generic

Forum image by Knight Foundation under Creative Commons Attribution-ShareAlike 2.0 Generic

Moodle, STACK and Maxima: Custom Data Sets

Maxima is extended through packages. The Moodle STACK plug has statistical support packages loaded by default. These are Stats, Descriptive and Distrib. We preload these packages using the optimisation steps.

We can load your data sets as part of the optimisation process. These will then be available as a matrix variable which you can use in questions. Manipulation of matrices isn’t as nice in Maxima as it is in the R environment, but it has a good range of functions.

Moodle, STACK and Maxima: Random Variables

The rand() function is STACK’s implementation of Maxima’s random() function.  Random variables are zero-numbered. You may need to use simplification to reduce the output to a single value.

x:rand(5);            /* pick a random number between 0 and 4 */
y:ev(rand(5)+1,simp); /* pick a random number between 1 and 5 */

NB: if the simplification is off then the result of y would be 4+1

The rand() function in STACK also picks from a list:

x:rand([a,b,c,d]);                   /* pick a random item from a list. 
                                        This list shows lower case letters */
y:ev((rand(5)+1)*rand([1,-1]),simp); /* pick a random positive or negative
                                        number between 1 and 5 */

You can apply this behaviour of the rand() function to any list object. For example

w:makelist(x,x,1,10);          /* make a list of integers between 1 and 10 */
x:makelist(2^x,x,1,8);         /* make a list of powers of 2 from 2^1 to 2^8 */
y:primes(2,30);                /* use the primes() function to generate a
                                  prime number between 2 and 30. */
z:map(fib,makelist(x,x,1,10)); /* use the map() and fib() functions to make a 
                                  list of the first 10 Fibonacci numbers */

NB: not all Maxima functions are allowed in STACK, but they can be enabled by MSD LT team if needed.

Moodle, STACK and Maxima: Simplification

Maxima will automatically simplify expressions when simplification is switched on.

Switch simplification off so that you can pre-calculate the question and any workings. Declare this option in the Question variables:

simp:false;

Simplification can be switched on an off in expressions:

(%i1) simp:false;
(%o1) false
(%i2) ev(2*x);
       2
(%o2) x  x
(%i3) ev(2*x,simp:true);
       3
(%o3) x

NB: the lines %i are input lines. Those with %o are output from maxima

Maxima cannot display intermediate steps for worked answers. It can be made to calculate those steps, if you’re willing to write them. This is much easier when simplification is switched off.

Moodle, STACK and Maxima: Getting Started

The STACK plugin for Moodle brings the Maxima to Moodle. Maxima is a Computer Algebra System which will calculate question variables and test student answers.

This is a first blog post in a set which will give tips for anyone wanting to start writing questions using STACK. There is also an Authoring Quick Start guide included in the documentation.

1. Write all your calculations into the Question variables field

It’s easiest to do all your calculations in one place and then includes these in the model answer and answer test fields. For worked answers, calculate intermediate results.

NB: all statements are terminated with a semi-colon; comments are shown by /* some text */

simp:false;        /* turn simplification off */
x:2;               /* define x variable */
y:3;               /* define y variable */
Ques:x*y;          /* product of x and y with simplification off */
Ans:ev(Ques,simp); /* product of x and y evaluated with simplification on */

You can now put Ans into the model answer field, and test against Ans in the potential response tree.

Computer Marked Maths now available

MSD Learning Technologies is now able to offer computer marked maths.

We are looking for departments with the University to make use of our project – for formative assessment at this stage. We particularly want to gauge enthusiasm and, ideally, to see examples of the questions which you’d find useful.

Highlights of the maths assessment system:

  1. interacts with Maxima which gives it full algebraic evaluation for simple or complex maths.
  2. allows use of random variables in questions
  3. can calculate and show worked answers
  4. can include control flow functions (if, while, etc, to modify or calculate variables)
  5. supports multiple tests on an answer (eg is it simplified? is it algebraically correct?)
  6. supports multi-part questions
  7. supports SI units
  8. supports questions requiring significant figures and decimal places

We have integrated with WebLearn, so you can offer assessments via your existing WebLearn sites. Assessments can also be provided as a standalone service using SSO if that is required.

The sponsorship of this project is through the IT Innovation Fund so we can offer this to any part of the University.

AngularJS: labelled empty option in select box when using ng-options

I’m using ng-options to generate the options for select boxes in AngularJS. By default, when a selected value is not defined, Angular adds a blank option, without a label. I wanted to give this blank option a label, e.g. “Select something”, but couldn’t see how to do it.

Not surprisingly it’s very easy, and is actually mentioned in the docs (https://docs.angularjs.org/api/ng/directive/select – 4th paragraph, beginning “Optionally” at time of writing), but like, I guess, most people, I never read the docs properly and just scanned the examples, which don’t show this.

All you need to do is add the labelled blank option in the select box, as you normally would if you were just writing the HTML, e.g.:

<select name="myselect" ng-model="MyCtrl.selected" 
   ng-options="option.value as option.label for option in MyCtrl.options">
   <option value="">Select something</option>
</select>

Angular will then generate the remaining options from the options array that you pass to it, and leave the blank option at the top.

In the above example, to not show a blank option at all, remove the option tag and set Ctrl.selected to be equal to the value that you want to be selected by default in the controller, e.g.

In controller.js

this.options = [ { value: 1, label: 'Yes' }, { value: 0, label: 'No' } ];
this.selected = 1;

In view.html

<select name="myselect" ng-model="MyCtrl.selected" 
   ng-options="option.value as option.label for option in MyCtrl.options">
</select>

CakePHP 3 JSON Views: Setting _jsonOptions special parameter

CakpePHP 3 makes creating JSON and XML views of your data very easy, certainly easier than I remember finding it in Cake 2. However, I found the documentation didn’t make it particularly clear how/where to set the _jsonOptions parameter. All the docs (http://book.cakephp.org/3.0/en/views/json-and-xml-views.html) say is:

“The JsonView class supports the _jsonOptions variable that allows you to customize the bit-mask used to generate JSON. See the json_encode documentation for the valid values of this option.”

It’s actually pretty simple, just put this in your Controller action:

$this->set('_jsonOptions', JSON_HEX_TAG );

I was actually doing this to try to get rid of the JSON_HEX_TAG option, which seems to be set by default. So I actually did this, to unset all the JSON options:

$this->set('_jsonOptions', '');

Documentation for Moodle STACK and Maxima

I found that authoring questions in STACK requires a relatively steep learning curve. The main reason is that STACK exposes the Maxima Computer Algebra System, and its command set which is ‘ALGOL-like‘. This is was very unfamiliar on first look but has elements which I recognised, having programmed in the R statistical language.

The following documentation sources have been invaluable in writing effective STACK questions:

  1. Plug-in overview on Moodle.org
  2. Documentation which installs with the Moodle Plug-in. This will be installed on any system running STACK. It’s easiest to view on GitHub.
  3. Documentation for Maxima on its’ SourceForge home site
  4. Maxima syntax documentation summary. Some of the guide is for interactive mode, but it shows how to craft expressions for your model answer and and potential response tree.
  5. Moodle’s LaTeX summary. Note that the \[ … \] markers are preferred to the $$ … $$ markers in STACK questions.

I also found it useful to install wxMaxima to use on my Ubuntu Linux box.

Moodle STACK installation on Ubuntu LTS

We’re investigating algebraic maths questions in Moodle at the moment. One of the question type plugins is STACK.

I tried to install the STACK question type plug in but it wasn’t working. The error was “CAS failed to return any data”.

The CAS is a Computer Algebraic System. In this case it is Maxima. Our server is Ubuntu. The latest Long Term Support version available is 14.04 Trusty. The default Maxima package for Trusty is Maxima 5.32. The minimum requirement is 5.25.1 but it wasn’t working for me. I decided to upgrade after a test on my local system.

I looked for a Launchpad repository which I could use for a prebuilt package to upgrade with. There are RPM files on the sourceforge homepage (for Red Hat) but no debs for Ubuntu.

The only option was to build the package from source.

Steps:

  1. install Ubuntu package dependencies: automake; clisp; gnuplot; texi2html and texinfo. The latter two are for the help files.
  2. remove currently installed version of maxima
  3. open the installation instructions for building from source
  4. clone using git command in their repository or download from source. Remember that the latest version supported by the Moodle plugin is 5.36.0
  5. go to the healthcheck <moodle_home>question/type/stack/healthcheck.php
  6. purge cache and check that all the tests complete successfully

Our implementation of the STACK question type now accepts the simple test question shown in the authoring guide.