Case study: Quiz - scripts on page Drawing

We have two webparts Script on page Drawing, script in the page itself and button Draw.

Script on page Drawing

function OnPreRender()
{
  //hide button for drawing, if the drawing was done and repeated drawing is not allowed
  var rep = OG.DataParameter.GetDataParameter(OGModel.Id, 'repeated_drawing').ValueBool;
  var name = OG.DataParameter.GetDataParameter(OGModel.Id, 'name').ValueAsString;
  OGControlOperations['draw'].Visible = rep || OG.IsNull(name);
}

Page Drawing - webpart Script

This webpart provides information about number of participants and number of correct answers.

function OnLoad()
{
  var contestants = 0;
  var advancing = 0;

  var cl = OGModel.ClassDefs['data'];
  var f = OG.DataRow.GetDataRowFilter(cl.Id);
  f.Filter_OnlyActive = true;
  var drl = OG.DataRow.GetDataByFilter(f);
  contestants = drl.Count;

  f['q1'] = 2; /* filters only correctly answered questions */
  f['q2'] = 4;
  f['q3'] = 1;
  f['q4'] = 4;
  f['q5'] = 4;
  f['q6'] = 6;
  f['q7'] = 4;
  drl = OG.DataRow.GetDataByFilter(f);
  advancing = drl.Count;

  var html = '<table><tr>' +
  '<td>Contestants:</td><td>' + contestants + '</td>' +
  '</tr><tr>' +
  '<td>Proceed to drawing:</td><td>' + advancing + '</td>' +
  '</tr></table>';

  OGForm.AddControl( OGForm.CreateLiteralControl('l1', html));
}

Also this page contains definition of CSS styles on tab Styles of the corresponding webpart Script.

div.obsah div.page
{
  background-color: white;
}

h1.losovani
{
  text-align: center;
  font-size: 30px;
}

Page Drawing - webpart Script 2

We have to insert a second webpart Script into the page. It will take care of the drawing itself.

function OnPreRender()
{
  var name = OG.DataParameter.GetDataParameter(OGModel.Id, 'name').ValueAsString;
  var email = OG.DataParameter.GetDataParameter(OGModel.Id, 'email').ValueAsString;

  OGWebPart.Visible = OGWebPart.IsWPDesign || !OG.IsNull(name); /* Webpart is displayed only in the design mode or when parameter name is not null */
  if ( !OG.IsNull(name))
  {
    var html = '<table><tr class="top">' +
    '<td>Vítěz:</td><td>' + name + '</td>' +
    '</tr><tr class="kontakt">' +
    '<td> </td><td>' + email + '</td>' +
    '</tr></table>';

    OGForm.AddControl( OGForm.CreateLiteralControl('l2', html));
  }
}

Page Drawing - button in the page

We will create a button Draw in the page. The button is of type Script.

//check whether parameter NAME is null (which means that the drawing was not performed yet)
//or whether repeated drawing is allowed
var rep = OG.DataParameter.GetDataParameter(OGModel.Id, 'repeated_drawing').ValueBool;
var name = OG.DataParameter.GetDataParameter(OGModel.Id, 'name').ValueAsString;
if ( rep || OG.IsNull(name))
{
  //filter correct records
  var cl = OGModel.ClassDefs['data'];
  var f = OG.DataRow.GetDataRowFilter(cl.Id);
  f.Filter_OnlyActive = true;
  f['q1'] = 2;
  f['q2'] = 4;
  f['q3'] = 1;
  f['q4'] = 4;
  f['q5'] = 4;
  f['q6'] = 6;
  f['q7'] = 4;
  var drl = OG.DataRow.GetDataByFilter(f);

  //get a random value for the found records <0-count)
  var winner = Math.floor(Math.random() * drl.Count); /* Math is a js library */

  //select the required record and store it in the parameter
  var pName = OG.DataParameter.GetDataParameter(OGModel.Id, 'name');
  pName.Value = drl[winner]['name'];
  OG.DataParameter.Save(pName);

  var pEmail = OG.DataParameter.GetDataParameter(OGModel.Id, 'email');
  pEmail.Value = drl[winner]['email'];
  OG.DataParameter.Save(pEmail);

  //refresh of the page to display the winner
  OGForm.RedirectTo(OGContentPage.PageUrl);
}