CRM and CX Blogs by Members
Find insights on SAP customer relationship management and customer experience products in blog posts from community members. Post your own perspective today!
cancel
Showing results for 
Search instead for 
Did you mean: 
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.
2 Comments