This is something I did last weekend and I thought it could be of some use to others: it's an implementation of a ternary (or tri) selection, also called a triangle plot, Gibbs triangle or Maxwell color triangle. Basically, it allows you to select across three different weighted criteria, under the contraint that they must all add up to a constant; in my case 100, but you can certainly scale the results to something else. This type of selector has been raised here before (Mobile app for data collection and visualization of narratives/stories? - #10 by LN), but there is still currently no widget in Collect or Enketo that can provide a contunous range across 2 or 3 dimensions [the range widget is 1-dimensional]. So I did it instead using discrete SVG regions plotted in a tesselated triangle.
Like any image-map select control, the critical requirement is that the id of the SVG components must match the name (ie values) of the associated choice-list in your form definition. In the case of this ternary selection, each value is actually a space-separated tuple with the 3 weights for that particular triangle. It is then just a matter of writing three selected-at() calculations to pull out each of these 3 weights. I've re-displayed the selected weighting in my example form using three range widgets, but that's certainly not necessary.
The trickiest bit in all this was [1] figuring out the right color hex codes for each of the triangles (but I think I got them all right!). And [2] figuring out the suitable 3 weights to assign to each triangle. As mentioned above, the sum of the three weights in the ternary plot should always be the same: here it is 100. So weighting the three corners is easy - they're 100% that corner and 0% the other two:
The triangles half way along each side are also easy - they're 50% one corner and 50% the other corner, and 0% the opposite corner:
Because it has 5 triangles per side, the other triangles along each side are also easy, with a 75% / 25% split (again the opposite corner is 0%).
There is one triangle in the exact middle which represents a completely even weighting, so to keep everything integers I've made that 33% / 34% / 33% [all things being equal, money is slightly more important than love or fame. 
]
The hard bit was then deciding exactly what to make the remaining 'interior' triangles. What I ended up doing was somewhat qualitative, and assigned what felt were appropriate 3 values for the triangles consistent with the more precise deterministic values described above. I think the values I came up with make sense and feel about right (and are multiples of 5). But if you wish to have a more scientifically rigorous weighting, eg measuring to the exact centroid of each triangle, then feel free to tweak these interior weights.
I rather like the color map as it gives a visible distinction to the three axes being traded-off, but you can certainly make all the triangles monochromatic. For example, entirely white (#FFFFFF), or all the same color but less saturated the closer to the center. The labels in the corresponding choice-list dont really matter too much, since the user is selecting spatially from the triangle, so in my form I just labelled them either the corresponding primary color or the letter of the triangle position (starting with A at the top, row by row...).
You obviously have to re-label the three axes to suit your particular use case. That requires editing the SVG to put in your own text labels, but I've tried to make it auto-align the labels so you just need to enter the new text. You can also customize the default font size or weight in the SVG if you prefer, although you may need to tweak the absolute Y coord of each label and/or viewBox if using a much larger font.
<g stroke="none" fill="black" font-family="monospace" font-size="1.5em" pointer-events="none">
<!-- TOP CENTER CORNER LABEL (RED) -->
<text x="250" y="-2" text-anchor="middle" dominant-baseline="auto">
Love
</text>
<!-- BOTTOM LEFT CORNER LABEL (BLUE) -->
<text x="0" y="435" text-anchor="start" dominant-baseline="hanging">
Fame
</text>
<!-- BOTTOM RIGHT CORNER LABEL (GREEN) -->
<text x="500" y="435" text-anchor="end" dominant-baseline="hanging">
Money
</text>
</g>
Have a play and let me know what you think! [I had to zip the SVG as cant upload it here otherwise, so remember to unzip it before deploying your form]
TernarySelection.xlsx (19.4 KB)
triangle.svg.zip (1.7 KB)