1. Case study: Quiz - scripts on page Drawing

    Article: AN0002361Updated: 24.01.2021

    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);
    }

×