<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" style="display:none;"> P {margin-top:0;margin-bottom:0;} </style>
</head>
<body dir="ltr">
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<span style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255); display: inline !important">>
...This compiler and units have allowed Me to finally create quiz which can</span><br style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255)">
<span style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255); display: inline !important">>
monitor even 40 editable fields at The same time. The advantage of this</span><br style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255)">
<span style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255); display: inline !important">>
approach is, that it is not necessary to fill out questions chronologically.</span><br style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255)">
<span style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255); display: inline !important">>
Respondent can decide The order. Respondent is not being forced to confirm</span><br style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255)">
<span style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255); display: inline !important">>
The right answer by using some confirmation button or by even pressing Enter</span><br style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255)">
<span style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255); display: inline !important">>
key.</span><br style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255)">
<span style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255); display: inline !important">>
It is excellent dynamic process...</span><br>
</div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<span style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255); display: inline !important"><br>
</span></div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<span style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255); display: inline !important">I've
put together a demo showing how you could add labels to editable fields (as mentioned in a prior email) and after reading one of your use cases (dynamic quiz fields) I changed it this morning to support a more dynamic approach.</span></div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<span style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255); display: inline !important"><br>
</span></div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<span style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255); display: inline !important">I
created the demo using the standard "TBrowserApplication" template and implemented a BuildUI(AInputs) method. the browser app call the BuildUI method in the .DoRun() but first adds a list of input names (think of these as your quiz questions). AInputs is just
a string list, so you could populate this list from a website or a database (or anything dynamically). The BuildUI method handles all of the nyx related logic for setting up a user interface object, adding the inputs to the UI, then adding the labels to be
"parented" to them, and finally rendering to the dom.</span></div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<span style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255); display: inline !important"><br>
</span></div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<span style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255); display: inline !important">I've
pushed this example to the nyx repository, so if you have it cloned, all you would need to do is "git pull". Below I've also listed the important methods as they are right now if it's easier to look at them here, but the full example can be found here:</span></div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<span style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255); display: inline !important"><a href="https://github.com/mr-highball/nyx/tree/master/demos/browser/input-labels">https://github.com/mr-highball/nyx/tree/master/demos/browser/input-labels</a><br>
</span></div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<span style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255); display: inline !important"><br>
</span></div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<span style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255); display: inline !important">```</span></div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<span style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255); display: inline !important">procedure
TInputLabels.doRun;
<div>var</div>
<div> LInputs : TStringList;</div>
<div>begin</div>
<div> //here we create a stringlist to hold the input "names". these could be</div>
<div> //pulled from a db, web request, or any other dynamic source, but to test</div>
<div> //we'll just add them manually</div>
<div> LInputs := TStringList.Create;</div>
<div> LInputs.Add('First Name');</div>
<div> LInputs.Add('Middle Name');</div>
<div> LInputs.Add('Last Name');</div>
<div> LInputs.Add('Did this question show correctly?');</div>
<div> BuildUI(LInputs);</div>
<div> LInputs.Free;</div>
end; <br>
</span></div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<span style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255); display: inline !important">```</span></div>
<div style=""><font color="#201f1e"><span style="font-size: 14.6667px;">```</span></font></div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<span style="color: rgb(32, 31, 30); font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 14.6667px; background-color: rgb(255, 255, 255); display: inline !important">procedure
TInputLabels.BuildUI(const AInputs: TStrings);
<div>var</div>
<div> I: Integer;</div>
<div> LLayout: INyxLayoutRelational;</div>
<div> LPropLayout : INyxLayoutProportional;</div>
<div> LContainer: INyxContainer;</div>
<div><br>
</div>
<div> (*</div>
<div> method to parent a label to an element, used in a "foreach" call</div>
<div> on the UI's elements collection</div>
<div> *)</div>
<div> procedure AddLabelToElements(const AElement : INyxElement);</div>
<div> var</div>
<div> LText: INyxElementStaticText;</div>
<div> LBounds: INyxRelationalBounds;</div>
<div> begin</div>
<div> //create and add the text to the UI</div>
<div> LText := NewNyxStaticText;</div>
<div> FUI.ContainerByIndex(I).Add(LText);</div>
<div><br>
</div>
<div> //set the text to the element's name</div>
<div> LText</div>
<div> .UpdateText(AElement.Name)</div>
<div> .UpdateFormat([sfBold]); //we'll bold for emphasis</div>
<div><br>
</div>
<div> //setup a bounds that anchors this text element to the input element</div>
<div> LBounds := NewNyxRelationalBounds;</div>
<div> LBounds</div>
<div> .UpdateTop(-40)</div>
<div> .UpdateVertAlignment(vaTop); //anchor to top</div>
<div><br>
</div>
<div> //add the text to be managed by the relational layout</div>
<div> LLayout.Add(LText, AElement, LBounds);</div>
<div> end;</div>
<div><br>
</div>
<div> (*</div>
<div> this method will setup proportional positions for all of</div>
<div> the input elements based on the index using the following formula:</div>
<div> Position = (Index + 1) * 0.10 (for the top)</div>
<div> *)</div>
<div> procedure PositionInputsByIndex(const AElement : INyxElement);</div>
<div> var</div>
<div> J: Integer;</div>
<div> begin</div>
<div> FUI.ContainerByIndex(I).Elements.IndexOf(AElement, J);</div>
<div> LPropLayout.Add(</div>
<div> AElement,</div>
<div> INyxProportionalBounds(NewNyxProportionalBounds</div>
<div> .UpdateTop(Succ(J) * 0.10)</div>
<div> .UpdateLeft(0.5) //position input to the center of the container</div>
<div> .UpdateHorzAlignment(haCenter))</div>
<div> );</div>
<div> end;</div>
<div><br>
</div>
<div>begin</div>
<div> FUI := NewNyxUI;</div>
<div> LLayout := NewNyxLayoutRelational;</div>
<div> LPropLayout := NewNyxLayoutProportional;</div>
<div> LContainer := NewNyxContainer;</div>
<div><br>
</div>
<div> //add inputs based on the strings and update the "name" property.</div>
<div> //we'll use this in the AddLabelToElements method as the label text</div>
<div> for I := 0 to Pred(AInputs.Count) do</div>
<div> LContainer.Add(NewNyxInput.UpdateName(AInputs[I]));</div>
<div><br>
</div>
<div> //add labels and size the container</div>
<div> FUI</div>
<div> .AddLayout(LLayout, I) //this layout controls the label positioning</div>
<div> .AddLayout(LPropLayout, I) //this layout controls the input positioning</div>
<div> .AddContainer(LContainer, I)</div>
<div> .ContainerByIndex(I)</div>
<div> .UpdateSize( //make the container take up 100% of the screen</div>
<div> NewNyxSize</div>
<div> .UpdateHeight(1)</div>
<div> .UpdateWidth(1)</div>
<div> .UpdateMode(smPercent) //use percent mode</div>
<div> )</div>
<div> .Container</div>
<div> .Elements</div>
<div> .ForEach(@PositionInputsByIndex);</div>
<div><br>
</div>
<div><br>
</div>
<div> //now that we've added all the inputs render to the screen so they have</div>
<div> //positions, then we need to add the labels and render again (we do this</div>
<div> //because of the dynamic nature of adding labels, normally only one render would be needed)</div>
<div> FUI.Render();</div>
<div> LContainer.Elements.ForEach(@AddLabelToElements);</div>
<div> FUI.Render();</div>
end;<br>
</span></div>
<div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
```</div>
<div id="Signature">
<div>
<div id="divtagdefaultwrapper" dir="ltr" style="font-size:12pt; color:#000000; font-family:Calibri,Helvetica,sans-serif">
<p style="margin-top: 0px; margin-bottom: 0px;margin-top:0; margin-bottom:0">-Highball<br>
</p>
</div>
</div>
</div>
</div>
</body>
</html>