[Pas2js] demohtmlwidgets eventtable how to sotre values from editable boxes

[Michael Van Canneyt]

On Wed, 21 Oct 2020, Michael Van Canneyt wrote:

>
>
> On Wed, 21 Oct 2020, Mgr. Janusz Chmiel wrote:
>
>> The code of teventtable crdeate how many editable fields is stored inside
>> dynamic Array variable. But how to get The appropriate value from every
>> field?
>>
>> The code from Jean uses standalone variable type textinputvidget so I can
>> use variablename.value.
>> But when I have wanted to get The value from The code inside teventtable I
>> have been helpless to achieve that.
>
> I will extend your code later tonight.

Attached the modified example. I removed all other demo classes.

The trick is to store the edit input boxes in an array.
So, the code now allocates 3 arrays
- Questions : array of strings with questions.
- Answers: array with expected user answers.
- userAnswers : array with input widgets.
These arrays are allocated in the constructor.
The questions are filled, you'll still need to fill the answer array.

I added 2 functions to show you how to use the answers.

one to see if the answer on question N is correct.
One to count the number of correct answers.

Hopefully this helps you to do what you want.

Michael.
-------------- next part --------------
unit demohtmlwidgets;

{$mode objfpc}

interface

uses
  classes, sysutils, web, js, webwidget, htmlwidgets,  widgetdemo;

Type
  
  TEventTableWidgetDemo = Class(TDemoContainer)
  private
    questions, answers: array of string;
    useranswers : array of TTextInputWidget;
    function useranswercorrect(aIndex : Integer) : Boolean;
    function correctanswercount : integer;
    function gettable : TEventTableWidget;
    procedure DoGetCellData(Sender: TObject; Enum: TTableRowEnumerator; aCell: TTableWidgetCellData);
  Public
    Constructor Create(aOwner: TComponent); override;
    class function WebWidgetClass: TCustomWebWidgetClass; override;
    Procedure ShowDemo; override;
    property MyTable : TEventTableWidget read gettable;
  end;


implementation

uses democonsts;

{ TEventTableWidgetDemo }

constructor TEventTableWidgetDemo.Create(aOwner : TComponent); 

begin
  Inherited;
    SetLength(questions,46);
    SetLength(answers,46);
    SetLength(useranswers,46);
    questions[0]:='ÝDFARLT';
    questions[1]:='ŽIDEOMLAC';
    questions[2]:='CĎARHIOŽOVE';
    questions[3]:='VEŠONEB';
    questions[4]:='ŠVYKVO';
    questions[5]:='vurton';
    questions[6]:='CHÁOND';
    questions[7]:='N.APAK';
    questions[8]:='REUBON';
    questions[9]:='ACŘVEBL';
    questions[10]:='DKNALO';
    questions[11]:='YČRČEAN';
    questions[12]:='BAJNELOC';
end;

procedure TEventTableWidgetDemo.DoGetCellData(Sender: TObject; Enum: TTableRowEnumerator; aCell: TTableWidgetCellData);

          
begin
  if aCell.Kind=rkBody then
    begin
    Case aCell.Col of
     0 : aCell.Text:=questions[aCell.Row];
     1 : 
       begin
       useranswers[aCell.Row]:=TTextInputWidget.Create(Self);
       aCell.Widget:=useranswers[aCell.Row];;
       end;
    end;
    end;
end;

class function TEventTableWidgetDemo.WebWidgetClass: TCustomWebWidgetClass;
begin
  Result:=TEventTableWidget;
end;

function TEventTableWidgetDemo.useranswercorrect(aIndex : Integer) : Boolean;

begin
  Result:=SameText(UserAnswers[aIndex].Value, Answers[aIndex]);
end;

function TEventTableWidgetDemo.correctanswercount : integer;

Var
  I: Integer;

begin
  Result:=0;
  For I:=0 to MyTable.RowCount-1 do
    if UserAnswerCorrect(i) then
      Inc(Result);
end;

function TEventTableWidgetDemo.GetTable : TEventTableWidget;

begin
  Result:=TEventTableWidget(WidgetInstance)
end;

procedure TEventTableWidgetDemo.ShowDemo;
begin
  inherited ShowDemo;
  With MyTable do
    begin
    OnGetCellData:=@DoGetCellData;
    CustomColumns.Add('Otázka');
    CustomColumns.Add('Odpověď');
    RowCount:=13;
    end;
end;

initialization
  TEventTableWidgetDemo.RegisterDemo;
end.