Customizing HTM page for the view component and creating an interactive quiz

[Former Member]

I started with an idea to create an interactive way to make SAP CRM fun and interesting end up creating a SAP CRM quiz.
To create a quiz I wanted radio buttons and images as an option on screen to create a question format for the user.

I followed following steps for achieving the task.

I created the radio button as a group and used the following tags to assign it to a group:

 

<thtmlb:radioButtonGroup id="Radio" >

The radio button would now be assigned to one group so only one option could be clicked a time.

The image had to be changed with each question and similarly the question also needed to be dynamic.

To make the pictures dynamic, I created a public static variable and declared in the implementation class. Then, I implemented the following code in the .htm page

  <thtmlb:image src    = "<%= controller->gv_url2 %>"

Now the pictures will be picked dynamically based on the value of public static variable gv_url.

Now to identify the question at each iteration I also created a global counter that would increment after every question.

 

GV_COUNTER	Static Attribute	Public	Type	NUM02

Now same will be followed for each question and image URL. So I created global static variable for each question and image URL.

To record the responses, I created an event handler for each of the radio button, that would record the response of each option clicked by user.

method EH_ONRADIO1.

  gv_resp1  = 'X'.

endmethod.

The response will then be handled on the submit handler for the submit button.

The following code will be written for submit button

  DATA: zv_msg_srv  TYPE REF TO cl_bsp_wd_message_service,

        lv_flag     VALUE 'FALSE' TYPE boolean.

  CONSTANTS : c_msgtype VALUE 'I' TYPE symsgty,

  c_msg_id VALUE 'ZFUN'  TYPE symsgid,

  c_correct_msg  VALUE '004' TYPE symsgno,

  c_wrong_msg    VALUE '005' TYPE symsgno.



  CLEAR : zv_msg_srv,lv_flag.



  zv_msg_srv = cl_bsp_wd_message_service=>get_instance( ).



  CHECK zv_msg_srv IS BOUND.





  CASE gv_counter.



    WHEN 0.

      IF gv_resp2 = 'X'.

        lv_flag = 'X'.



      ENDIF.



    WHEN 1.

      IF gv_resp4 = 'X'.

        lv_flag = 'X'.

      ENDIF.



    WHEN 2.

      IF gv_resp3 = 'X'.

        lv_flag = 'X'.

      ENDIF.



    WHEN 3.

      IF gv_resp1 = 'X'.

        lv_flag = 'X'.

      ENDIF.



    WHEN 4.

      IF gv_resp1 = 'X'.

        lv_flag = 'X'.

      ENDIF.



    WHEN 5.

      IF gv_resp3 = 'X'.

        lv_flag = 'X'.

      ENDIF.





  ENDCASE.



  IF gv_counter <= 5.

    IF lv_flag = 'X' .

*---Right Answer-----*

      CALL METHOD zv_msg_srv->add_message

        EXPORTING

          iv_msg_type   = c_msgtype

          iv_msg_id     = c_msg_id

          iv_msg_number = c_correct_msg.







    ELSE.



*---Wrong Answer-----*

      CALL METHOD zv_msg_srv->add_message

        EXPORTING

          iv_msg_type   = c_msgtype

          iv_msg_id     = c_msg_id

          iv_msg_number = c_wrong_msg.



    ENDIF.

  ENDIF.



  CLEAR: gv_resp1, gv_resp2, gv_resp3, gv_resp4.

  gv_counter = gv_counter + 1.

I also implemented message handling for the message being displayed for correct and wrong response.

Now to change the values dynamically, I implemented the following code in do prepare output.

Do_prepare_output:

 

 CASE gv_counter.

  WHEN 0.

    gv_question = '   Identify the Apple LOGO   '.

    gv_url1 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/logo.bmp'.

    gv_url2 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/apple.bmp'.

    gv_url3 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/microsoft.bmp'.

    gv_url4 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/yahoo.bmp'.



  when 1.

    gv_question = 'Identify button in web UI'.

    gv_url1 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/checkbox.bmp'.

    gv_url2 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/input_area.bmp'.

    gv_url3 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/radio.bmp'.

    gv_url4 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/button.bmp'.



  when 2.

    gv_question = 'Identify the Radio button in web UI'.

    gv_url1 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/dropdown.bmp'.

    gv_url2 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/checkbox.bmp'.

    gv_url3 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/radio.bmp'.

    gv_url4 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/button.bmp'.



  when 3.

    gv_question = 'Identify the Checkbox in web UI'.

    gv_url1 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/checkbox.bmp'.

    gv_url2 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/dropdown.bmp'.

    gv_url3 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/input_area.bmp'.

    gv_url4 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/button.bmp'.



  when 4.

    gv_question = 'Identify the Dropdown field below'.

    gv_url1 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/dropdown.bmp'.

    gv_url2 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/checkbox.bmp'.

    gv_url3 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/radio.bmp'.

    gv_url4 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/button.bmp'.



  when 5.

    gv_question = 'Identify the Radio button in web UI'.

    gv_url1 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/dropdown.bmp'.

    gv_url2 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/checkbox.bmp'.

    gv_url3 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/radio.bmp'.

    gv_url4 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/button.bmp'.



 when 6.

    gv_question = 'Identify the Radio button in web UI'.

    gv_url1 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/dropdown.bmp'.

    gv_url2 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/checkbox.bmp'.

    gv_url3 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/radio.bmp'.

    gv_url4 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/button.bmp'.





  ENDCASE.

The value of each question and image will be changed based on a global counter( gv_counter ).

Finally, I implemented the code for the htm page to hadle the layout of the view.

 

<%@page language="abap" %>

<%@extension name="htmlb" prefix="htmlb" %>

<%@extension name="xhtmlb" prefix="xhtmlb" %>

<%@extension name="crm_bsp_ic" prefix="crmic" %>

<%@extension name="thtmlb" prefix="thtmlb" %>

<%@extension name="chtmlb" prefix="chtmlb" %>

<%@extension name="bsp" prefix="bsp" %>

<chtmlb:config mode        = "RUNTIME"

               displayMode = "TRUE"

               xml         = "<%= controller->configuration_descr->get_config_data( ) %>" />

<%-- <thtmlb:fileUpload id = "imgUpl" --%>

<%-- onUpload = "upload" /> --%>

<thtmlb:tray design = "PLAIN"

             height = "100%"

             id     = "de"

             title  = "Now Answer the below question" >

  <thtmlb:trayBody>

    <thtmlb:grid cellSpacing = "1"

                 columnSize  = "3"

                 height      = "100%"

                 rowSize     = "7"

                 width       = "100%" >

     <thtmlb:label id = "question"

                   text = '<%= controller->gv_question %>'

                   labelType = "MEDIUM"   />

      <thtmlb:radioButtonGroup id="Radio" >

        <thtmlb:gridCell colSpan             = "1"

                         columnIndex         = "1"

                         horizontalAlignment = "center"

                         rowIndex            = "2" >

          <thtmlb:radioButton id      = "R1"

                              text    = " A "

                              onClick = "radio1" />

          <thtmlb:image src    = "<%= controller->gv_url1 %>"

                        width  = "175"

                        height = "175" />

        </thtmlb:gridCell>

        <thtmlb:gridCell colSpan             = "1"

                         columnIndex         = "2"

                         horizontalAlignment = "center"

                         rowIndex            = "2" >

          <thtmlb:radioButton id      = "R2"

                              text    =  " B "

                              onClick = "radio2" />

          <thtmlb:image src    = "<%= controller->gv_url2 %>"

                        width  = "175"

                        height = "175" />

        </thtmlb:gridCell>

        <thtmlb:gridCell colSpan             = "1"

                         columnIndex         = "1"

                         horizontalAlignment = "center"

                         rowIndex            = "4" >

          <thtmlb:radioButton id      = "R3"

                              text    = " C "

                              onClick = "radio3" />

          <thtmlb:image src    = "<%= controller->gv_url3 %>"

                        width  = "175"

                        height = "175" />

        </thtmlb:gridCell>

        <thtmlb:gridCell colSpan             = "1"

                         columnIndex         = "2"

                         horizontalAlignment = "center"

                         rowIndex            = "4" >

          <thtmlb:radioButton id      = "R4"

                              text    = " D "

                              onClick = "radio4" />

          <thtmlb:image src    = "<%= controller->gv_url4 %>"

                        width  = "175"

                        height = "175" />

        </thtmlb:gridCell>

        <thtmlb:gridCell colSpan             = "1"

                         columnIndex         = "1"

                         horizontalAlignment = "right"

                         rowIndex            = "7" >

          <thtmlb:button id      = "submit"

                         onClick = "submit"

                         text    = "SUBMIT" />

        </thtmlb:gridCell>

      </thtmlb:radioButtonGroup>

    </thtmlb:grid>

  </thtmlb:trayBody>

</thtmlb:tray> 

So instead of creating multiple views only one view could handle multiple questions and images that would change dynamically with each answer.

The idea of fun ended up creating a fun game for each one to enjoy. 🙂




Please send your comments on improving or any queries related to it.