This discussion is archived
12 Replies Latest reply: Apr 20, 2013 8:01 PM by 1000398 RSS

customized layout and update the page items

1000398 Newbie
Currently Being Moderated
Hi,

I am working on an APEX application, I need a page to display the questions, and the alternative options, such as single choose by radio group or mutiple shoose by checkbox. Then the user will check the right answers. After answer all the questions, submit the page to get the score.

The layout should be: seperate the regions by the question kind. in each region, the question in the first line; the four options in the second line, with the check box or radio box; in the page bottom, there is a submit button.

The tables are designed as follow,
create table RULE_QA_SHEETS
(
SHEET_ID NUMBER not null, -- ID for the whole question answer sheet
TEMPLATE_ID NUMBER not null, -- Use a tmplate to generate the sheet, such as the question numbers by kind, easy or hard
PERSON_ID NUMBER not null, -- the user who answer the questions
ANSWER_DATE DATE,
REMARK VARCHAR2(4000 CHAR)
)

create table RULE_QA_SHEET_ITEMS
(
ITEM_ID NUMBER not null, -- ID for the question in this sheet.
SHEET_ID NUMBER not null, -- master table id.
QUESTION_ID NUMBER not null, -- ID for the question in the inventory.
ANSWER VARCHAR2(30 CHAR) -- the answer which the user checked, will be compared with the inventory. once the user submit the page, this column will be updated.
)

I didn't find te proper APEX report template, and I can use plsql dynamic content to generate the layout but no idea how to update the right answers.

Anybody has the similar experience or give me some helps, it would be great!

Thanks!
  • 1. Re: customized layout and update the page items
    riedelme Expert
    Currently Being Moderated
    Chongwu wrote:
    Hi,

    I am working on an APEX application, I need a page to display the questions, and the alternative options, such as single choose by radio group or mutiple shoose by checkbox. Then the user will check the right answers. After answer all the questions, submit the page to get the score.
    You can manually create the report and the submit process. It is a lot of work - generating forms with reports based on tables is much easier - but will allow you to customize the process the way you described. Search the internet for a description on how to go about this. In general you will need to

    * create page items for each value to be submitted. Linking the page items to database columns should allow them to be sent during a submit
    * create a submit button
    * create a submit process to insert the data once received. Remember that unchecked check boxes will not have a value.

    Search for a better description on what to do with your favorite browser search tool.
  • 2. Re: customized layout and update the page items
    Howard (... in Training) Pro
    Currently Being Moderated
    I'm hungry. But I always like to eat the elephant in small bites. Would you create a simple (i.e., a small bite) example on apex.oracle.com with say, one region and two questions? Make one with a radio group and the other with checkboxes. If we could actually see what you have in mind, perhaps we could help more.

    Once we see what you are doing, saving the answers or comparing to the correct answers shouldn't be that difficult. I can imagine a varient of the application where you display the questions and collect/store the answers as the right answers.

    Regards,
    Howard
  • 3. Re: customized layout and update the page items
    riedelme Expert
    Currently Being Moderated
    I can't. I don't have a login and don't want to go though the process of getting one just now.

    There should be descriptions of what I suggested online, maybe even video tutorials if you are lucky
  • 4. Re: customized layout and update the page items
    Howard (... in Training) Pro
    Currently Being Moderated
    Sorry riedelme,

    I really meant for Chungwu to create the example.

    -- Howard
  • 5. Re: customized layout and update the page items
    1000398 Newbie
    Currently Being Moderated
    Thanks for your feedback. I have created the example in apex.oracle.com.
    Here is the login info:
    Workspace : CHONGWU
    User: dev1
    Password: 1qaz2wsx
    Application 42990 Question and Answers

    To simplify the problem, I only use one table
    create table rule_qa
    (
    qa_id number not null,
    question_type varchar2(30 char), 'S' ifor singlechoice, 'M' for mutiple choice.
    question varchar2(4000 char),
    answer_a varchar2(4000 char),
    answer_b varchar2(4000 char),
    answer_c varchar2(4000 char),
    answer_d varchar2(4000 char),
    right_answer varchar2(30 char),
    my_answer varchar2(30 char) -- After the "SUBMIT", this column will be updated as the user's answer.
    )

    Page 15, I can use pl/sql dynamic region to display the layout. (Not sure is it correct)
    I don't know how to write the process for the submit button, which should update the column "my_answer".

    Actually this page is quite like the page to register an apex workspace at apex.oracle.com, but a little complex for single choice and mutiple choice.
    http://apex.oracle.com/pls/apex/f?p=4700:24:0::NO:::

    Thanks
    Chongwu
  • 6. Re: customized layout and update the page items
    Howard (... in Training) Pro
    Currently Being Moderated
    Chongwu,

    I logged in. It looks nice. But I've never done RGs this way so maybe someone else can help.

    Since these are composed/displayed from HTP.P, I don't know how to reference the values. In fact, when I just View > Source in IE, I don't even see the values. When I have done Radio Groups or Checkboxes declaritively -- thru the GUI with say, a Radio Group item, I've always had HTML code display like
    <input type="radio" id="P3_RADIO_GROUP_0" name="p_t01" value="Y"  ><label for="P3_RADIO_GROUP_0">Yes</label><br />
    <input type="radio" id="P3_RADIO_GROUP_1" name="p_t01" value="N"  ><label for="P3_RADIO_GROUP_1">No</label><br />
    <input type="radio" id="P3_RADIO_GROUP_2" name="p_t01" value="M" checked="checked" ><label for="P3_RADIO_GROUP_2">Maybe</label>
    where I just referenced the value as ":P3_RADIO_GROUP". In this case, :P3_RADIO_GROUP = 'M'.

    Wish I knew more,
    Howard
  • 7. Re: customized layout and update the page items
    1000398 Newbie
    Currently Being Moderated
    Howard,

    Anyway, thanks for your reply on this issue.

    I think there are some points:
    1. How to get the value for the radio or check box and related question id.
    2. How to loop these values and update the dabatase in the process.

    Anybody from the APEX development team can help me? this problem should already been done in this page
    http://apex.oracle.com/pls/apex/f?p=4700:24:0::NO:::

    Thanks
    Chongwu

    Edited by: Chongwu on 2013-4-8 下午8:55

    Edited by: Chongwu on 2013-4-8 下午8:57
  • 8. Re: customized layout and update the page items
    fac586 Guru
    Currently Being Moderated
    Chongwu wrote:

    I think there are some points:
    1. How to get the value for the radio or check box and related question id.
    2. How to loop these values and update the dabatase in the process.
    The values are submitted using associative arrays defined in the <tt>apex_application</tt> package, and validating and processing them is therefore different from page items. See Referencing Arrays in the APEX API Reference for information on how to access values of items created using <tt>apex_item</tt> methods.
  • 9. Re: customized layout and update the page items
    1000398 Newbie
    Currently Being Moderated
    Here is the login info.
    Workspace : CHONGWU
    User: dev1
    Password: 1qaz2wsx
    Application 42990 Question and Answers

    Could you please give me an example about this? page 15, pls help to check the pl/sql dynamic region which generate the layout.

    The source code generated is follow:
    <div class="uRegionContent clearfix">
    <P><B>1.What's the right answer for 1 + 1 = ?</B> </P>
    <li><input type="radio" name="f01" value="A" />A. 2</li>
    <li><input type="radio" name="f01" value="B" />B. 3</li>
    <li><input type="radio" name="f01" value="C" />C. 4</li>
    <li><input type="radio" name="f01" value="D" />D. 5</li>
    <BR>
    <P><B>2.What's your role in this company?</B> </P>
    <li><input type="radio" name="f02" value="A" />A. Developer</li>
    <li><input type="radio" name="f02" value="B" />B. QA</li>
    <li><input type="radio" name="f02" value="C" />C. Architect</li>
    <li><input type="radio" name="f02" value="D" />D. Business Analysis</li>
    <BR>
    <P><B>3.How long have you worked?</B> </P>
    <li><input type="radio" name="f03" value="A" />A. less then 1 year</li>
    <li><input type="radio" name="f03" value="B" />B. 1 ~ 5 years</li>
    <li><input type="radio" name="f03" value="C" />C. 6 ~ 10 years</li>
    <li><input type="radio" name="f03" value="D" />D. more than 10 years</li>
    <BR>

    </div>

    Every question will have one array item, right? How can I know the question id related to f01, f02, f03?
    How to loop the f01, f02, f03? and How can I get the answer the customer checked?
  • 10. Re: customized layout and update the page items
    Howard (... in Training) Pro
    Currently Being Moderated
    How many questions are in your application? It looks like this method can only handle 50, f01 - f50.

    If it's a small number of questions, the radio group could be questions f01 - f25 and the checkboxes f26 - f50. Or some arrangement like that. You will just need to generate and store the "f" number with the question so YOU make the association between the question and the "f" number. The reference Paul (fac586) gives shows several examples of how to loop through these "f" numbered items.

    I hope that helps.
    Howard
  • 11. Re: customized layout and update the page items
    fac586 Guru
    Currently Being Moderated
    Chongwu wrote:
    Here is the login info.
    Workspace : CHONGWU
    User: dev1
    Password: 1qaz2wsx
    Application 42990 Question and Answers

    Could you please give me an example about this? page 15, pls help to check the pl/sql dynamic region which generate the layout.
    See page 150 in your app. I've started with a copy of your page 15, and made some changes to the Dynamic PL/SQL regions to produce more semantic HTML using ordered lists and labels. The labels also provide bigger clickable/touchable targets when answering the questions.
    declare
    
      i number := 1;
    
    begin
    
      htp.p('<ol class="questions">');
      
      for q in (
        select
            q.qa_id
          , q.question
          , q.answer_a
          , q.answer_b
          , q.answer_c
          , q.answer_d
        from
            rule_qa q
        where
            q.question_type = 'S')
      loop
        htp.p('<li>' || q.question || '<ol class="answers">');
      
        htp.p('<li><span>' || apex_item.radiogroup(i, 'A', null, p_item_id => 'q-' || i || '-a', p_item_label => q.answer_a) || '</span>');
        htp.p('<li><span>' || apex_item.radiogroup(i, 'B', null, p_item_id => 'q-' || i || '-b', p_item_label => q.answer_b) || '</span>');
        htp.p('<li><span>' || apex_item.radiogroup(i, 'C', null, p_item_id => 'q-' || i || '-c', p_item_label => q.answer_c) || '</span>');
        htp.p('<li><span>' || apex_item.radiogroup(i, 'D', null, p_item_id => 'q-' || i || '-d', p_item_label => q.answer_d) || '</span>');
      
        htp.p('</ol>');
        
        i := i + 1;
    
      end loop;
    
      htp.p('</ol>');
      
    end;
    Some CSS is required for the required formatting and to get the labels to actually appear:
    ol.questions>li {
      margin-bottom: 1em;
      font-weight: 600;
    }
    ol.answers {
      margin: 0.5em 2em;
      list-style: lower-alpha outside;
    }
      ol.answers>li {
        clear: left;
        margin: 0.5em 0;
        font-weight: 400;
      }
      ol.answers>li span {
        display: inline-block;
      }
      ol.answers>li label.hideMeButHearMe {
        position: static;
        top: auto;
      }
      ol.answers>li input {
        float: left;
        margin: 0 0.5em 0 0;
        padding: 0;
        vertical-align: middle;
      }
    Finally there's a simple process that saves the responses in an APEX collection. Collections are frequently used in Q&A and survey apps to store responses temporarily before final processing:
    declare
    
      answer varchar2(32767);
      
    begin
    
      /*
        Create or empty the APEX collection used to temporarily store the user
        responses.
      */
      apex_collection.create_or_truncate_collection('ANSWERS');
    
      for i in 1..50
      loop
        /*
          Dynamically capture the contents of each apex_application array...
        */
        execute immediate '
            begin
              :1 := apex_util.table_to_string(apex_application.g_f' || to_char(i, 'fm09') || ');
            end;'
          using out answer;
        
        wwv_flow.debug('apex_application.g_f' || to_char(i, 'fm09') || ' = ' || answer);
    
        /*
          ...and if there's a response then record it in the collection.
        */
        if answer is not null
        then
          apex_collection.add_member(
              p_collection_name => 'ANSWERS'
            , p_n001 => i
            , p_c001 => answer);
        end if;
        
      end loop;
      
    end;
    This makes use of a rather horrible dynamic evaluation of the <tt>apex_application</tt> arrays. As Howard points out, there are only of 50 of these arrays, which may be limiting if you intend to have more than 50 questions. A common way to avoid both of these issues is to present only one question at a time (branching back to the same page in a kind of pseudo-wizard until all questions are answered), so you only have to reference a single, known array.

    Note however that I'm not keen on this single table model. You may want to consider using a more flexible and extensible model like in this example.
  • 12. Re: customized layout and update the page items
    1000398 Newbie
    Currently Being Moderated
    Thank you very much, the question is answered.
    For the single table design, I just want to simplify the question, and it will not used in the system design. Anyway, thanks for your reminder.

    Chongwu

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points