Challenge Overview
Project overview
We are building a web application that allows partners to share data in order to identify suspicious claims. A claim is a demand for reimbursement submitted to an insurance company. The partners in the network are healthcare insurers.
Attached to this contest (see the file app.zip) is the HTML prototype for the overall application with placeholders for some features. In this contest, you will be implementing the query construction interface based on the attached storyboards.
Query construction concept
This interface allows the user to visually construct logical expressions such as (A OR B OR NOT C) AND NOT (D OR E). The letters A, B, and so on represent terms of the expression. Each term imposes a constraint on a claim attribute. For example, one possible term is "Diagnosis code matches EQR-440**02". Another is "Payment minimum $50, maximum $500".
Attributes are chosen from a dropdown menu which is arranged into color-coded categories. It is important to understand the concept of grouping, which is equivalent to putting parentheses around a sequence of attributes. For example, the user might start by making the sequence A OR B AND C. Then the user can select the A and the B term and group them together, resulting in (A OR B) AND C. Now the user can add a constraint D and group it with the C, resulting in (A OR B) AND (C OR D).
Note that any term or any group can be negated, which means adding NOT in front of it. For example, we can negate the term B and the group (C OR D) to obtain (A OR NOT B) AND NOT (C OR D).
Grouping means adding parentheses. For example, grouping A AND B results in (A AND B). Grouping that expression results in ((A AND B)). Ungrouping means removing parentheses. Ungrouping ((A AND B)) results in (A AND B). Ungrouping is invalid if there are no more parentheses to be removed.
Task requirements
Please refer to the pages New_Study.html and Edit_Study.html in the overall prototype. These pages are essentially identical, differing only in their title. We will refer to this interface as the study editing page.
The study editing page contains two tabs. In this contest, you are replacing the first tab with the UI represented by the attached storyboards. You do not have to do anything to the second tab.
The single query construction tab will contain everything shown in the attached storyboards. In addition to the behavior shown in the storyboards, you must implement the following features.
- As the user builds the query in the lower pane, write the textual form of the query to the upper pane. The user cannot edit the upper pane.
- Ensure that the same operator applies throughout a given level of a group. For example, if the user has A AND B AND C, changing either the first or the second AND to OR causes both of them to be changed, resulting in A OR B OR C.
- Implement merging, which joins groups at the same level. For example, merging (A) AND (B) OR (C) results in (A AND B AND C). Always apply the first operator.
We are also making the following minor changes.
- rename the "Merge all" button to "Merge"
- rename the "lesser than" condition to "less than"
- add a "between" condition that has both a minimum and a maximum field
���If any part of the interface is unclear, please ask for clarification in the forum.
Final Submission Guidelines
Submission guidelines
You may modify the existing HTML files, but not any other files. Make new directories called sps.js, sps.css, and sps.i to store your new files. Submit the entire modified UI prototype package.
Your new code must not cause any errors. CSS warnings are acceptable if you explain them. The following browsers must be supported.
- Windows: IE 7+, Safari 5+
- Mac: Safari 6
- Linux, Mac, Windows: Firefox 20+, Chrome 24+
You may use jQuery. The copilot's permission is required for other libraries.
Judgment criteria
- clean, compact, well-documented, and generally maintainable HTML + CSS + JS files are expected
- the best submission will be error-free and satisfy all requirements