Archive for May, 2013

Developing a Quiz component using Adobe CQ

In this blog entry, I will show you how to develop a CQ component. A CQ component, typically, has two parts. The first one is the CQ widget – the Graphical User  Interface (GUI) in which an author adds content. Second one is a script; in this example, a JSP page that defines the logic that you want to apply to the content.

You will see how to develop a widget and get the data included in the widget using the script. We can demonstrate the same using a “Hello World” example; there is no fun in developing such a component!! :)

Here, we are going to develop a Quiz component. An author can enter a question and multiple possible answers to check the mastery of the reader. When the reader selects an answer and submits, the appropriate message appears in the page. Following is the screenshot of the Quiz component in the Author instance.

component1

Basic understanding of the following is a prerequisite:

  • CQ Author and Publisher instance (You should ideally have them running in your machine.)
  • CQ templates (You should have a template that you can modify for this example.)
  • JavaScript
  • Java Server Pages (JSP)

I will not provide details on how to create a template. Refer to the  “How to Create a Fully Featured Internet Website” document that has lots of good information on how to accomplish this task.

Create the component node

  1. Login to CRXDE Lite as an admin.
  2. Inside the app folder, go to your website directory and locate the Components folder.
  3. Right-click the folder and then select Create Component. Create a component, question, with the following details:
    allowedParents = */parsys
    resourceSuperType = foundation/components/page

Develop GUI of the component

In the Quiz component, we need six text fields. First one for the question, four text fields for various options, and the sixth one is for the author to enter the correct answer. The first step to develop GUI of the component is to add a Dialog node that can hold various elements such as text boxes.

  1. Right-click the question node and select Create Dialog.
  2. Right-click the dialog node, and add another node with the following properties:
    name: items
    Type: cq:WidgetCollection
  3. Right-click and create a Panel, Tab1, with the following properties. We need only one tab in the GUI.
    name: Tab1
    Type: cq:Panel
  4. Right-click and add another node of widget collection that can hold the text fields.
    Name: items
    Type: cq:WidgetCollection
  5. Now, let us add the text fields. Right-click and add a node.
    Name: question
    Type: cq:Widget
  6. Add the following properties manually.
    fieldLabel – String – Question
    name – String – ./question
    xtype – String – textfield
  7. Repeat step 5 and 6 for the following:
    optionA
    optionB
    optionC
    optionD
    answer

Ensure that you changed the name and fieldLabel based on the text field. After completing this operation, this is what your node hierarchy looks like:

node_hierarchy

 

Update the JSP file to include the logic to process the content

Update the content of the question.jsp page as shown below:

<%@include file=”/libs/foundation/global.jsp”%>
<%@page session=”false” %>
<%
<!– section1 –>
String question=properties.get(“question”, “Type the question”);
String optionA=properties.get(“optionA”, “Type the option A”);
String optionB=properties.get(“optionB”, “Type the option B”);
String optionC=properties.get(“optionC”, “Type the option C”);
String optionD=properties.get(“optionD”, “Type the option D”);
String answer=properties.get(“answer”, “Type the answer”);
<!– section2 –>
out.write(“<FORM><B>”+question+”</B><P>”);
out.write(“<INPUT TYPE=hidden name=\”answer\” VALUE=\””+answer+”\”>”);
out.write(“<INPUT TYPE=\”radio\” NAME=\”options\” VALUE=\””+optionA+”\”>”+optionA+”<br>”);
out.write(“<INPUT TYPE=\”radio\” NAME=\”options\” VALUE=\””+optionB+”\”>”+optionB+”<br>”);
out.write(“<INPUT TYPE=\”radio\” NAME=\”options\” VALUE=\””+optionC+”\”>”+optionC+”<br>”);
out.write(“<INPUT TYPE=\”radio\” NAME=\”options\” VALUE=\””+optionD+”\”>”+optionD+”<P> “);
out.write(“<INPUT TYPE=\”button\” NAME=\”Validate\” VALUE=\”Validate\” onClick=\”checkAnswer(this.form)\”>”);
out.write(“</FORM>”);
%>

If you know the basics of JSP, you have already figured out what we are doing.

String question=properties.get(“question”, “Type the question”);

In section 1, we assign the value provided in the question text box to a string variable.
properties.get(“question”, “Type the question”) method gets data in the question field and the second argument is the default value that an author sees while editing the component.

The second section in the code is nothing but a form in a JavaScript. We dynamically change the values and labels using the inputs from the author. When a reader, submits an answer, we call a method checkAnwser(). We have not yet defined this method in the JSP page. It is defined in the template page.

Include the script in your template

You can include JavaScript functions that you use in the header of your template. The following code checks the correct answer and provides the user appropriate error message.

<head> <script type=”text/javascript”>
function checkAnswer(form) { for (var i = 0; i < form.options.length; i++) { if (form.options[i].checked)
{
break
}
}
if (form.options[i].value == form.answer.value)
{ alert(“You selected the correct answer!!”) } else { alert(“You selected an incorrect answer!!”) }
}
</script> </head>
 

Add the component in the Author instance

  1. Create a page with the template that you used.
  2. From the side-kick, drag-and-drop the Question component to the page.
  3. Right-click the component and click Edit.
  4. Enter the details and click OK.

edit

The question and options appear in your page. Now publish the page to see it in the Author instance.