Sign in Join

Live chat for Free Pascal, Lazarus, Delphi and every Pascal programmer.

Mailing lists / pas2js / 2020-10

demohtmlwidgets eventtable how to sotre values from editable boxes

8 messages · 2 people · –

Reply by email Subscribe to this list Your subscription

Read-only archive. Use j and k to move between messages.

Mgr. Janusz Chmiel
I Am dreaming. If it would be possible to collect values from editable
fields by using The code which is The part ofThe
procedure TEventTableWidgetDemo.DoGetCellData(Sender: TObject; Enum:
TTableRowEnumerator; aCell: TTableWidgetCellData);

How complex would be to extend The code so some dynamic array or other variable could contain values which have been stored inside every editable field?
I can not simply use value word to get that.
Thank you for some advice.

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20201020/82333f6d/attachment.htm>

Reply by email

Michael Van Canneyt
to Mgr. Janusz Chmiel
Mgr. Janusz Chmiel wrote 9 lines
I Am dreaming. If it would be possible to collect values from editable fields by using The code which is The part ofThe procedure TEventTableWidgetDemo.DoGetCellData(Sender: TObject; Enum: TTableRowEnumerator; aCell: TTableWidgetCellData); How complex would be to extend The code so some dynamic array or other variable could contain values which have been stored inside every editable field? I can not simply use value word to get that.

If you send me your code, then I can modify it so you can get the answers.

Michael.

Reply by email

Mgr. Janusz Chmiel
to Michael Van Canneyt

I AM attaching yours modified demo code. Because I think, that only when I will follow yours code and when I and you will slightly modify it, it will be finally possible to create quizes which will be able to fill out 40 items and more by using edit boxes and long table, which could be seen on various devices screens.
Many editable boxes is excellent approach for visually impaired users. Because long block of text and monitoring it and jumping from one eitable field to A block of 40 words is really not very convenient. Table is more nicer for sighted majority than long chunks of editboxes and short texts, editbox and labels only.
If I Am using wrong demo code, if also event table is not capable to display so many edit boxes on Android tablets, please let Me know, which table code could do that. Stringtable? Or other Demo code based on Bootstrap units? I AM attaching yours demo code, because My attempt to inject it separately have produced many compiler errors. So I have rather used yours code. My little change resides inside The procedure
procedure TEventTableWidgetDemo.DoGetCellData(Sender: TObject; Enum: TTableRowEnumerator; aCell: TTableWidgetCellData); But I have chosen wrong technique to test The Editable field change. And if then condition will also not work.
Very strange issue, in some cases, I can not add if then condition inside one code procedure on a various places.
-------------- next part --------------
A non-text attachment was scrubbed...
Name: demohtmlwidgets - copy.pp
Type: application/octet-stream
Size: 11178 bytes
Desc: not available
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20201020/3ed8cdc5/attachment.obj>

Reply by email

Mgr. Janusz Chmiel
to Mgr. Janusz Chmiel

I AM also attaching functioning code based on code from MR Jean Suzieau. Ideal approach would be to combine his approach with eventprocedure demo to create long table with editable fields.
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Czechtowns.lpr
Type: application/octet-stream
Size: 2704 bytes
Desc: not available
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20201020/d6bb6ce3/attachment.obj>

Reply by email

Mgr. Janusz Chmiel
to Mgr. Janusz Chmiel

Code is universal for my needs. I want to transform one .pdf file which contain various memory training tests to WEb apps by using Pas2js transpiller. If somebody of us would be so kind and if this kind human being would develop routine, which would allow Me to use table which will store questions and every answer will be stored as a separate editbox, it would be excellent.
May be, that it would be even possible to combine The code which I have sent previously with tevent table or string table. Important is that Editable fields and columns should be visible on various screen syzes. I would simply use The code which I have sent to you. But it do not allow to support 40 or more fields with editbox for some Android tablet screens.

Reply by email

Mgr. Janusz Chmiel
to Mgr. Janusz Chmiel

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.

Reply by email

Michael Van Canneyt
to Mgr. Janusz Chmiel
Mgr. Janusz Chmiel wrote 8 lines
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.

Please give me some time, I have other things to do as well.

Michael.

Reply by email

Michael Van Canneyt
to Michael Van Canneyt
Michael Van Canneyt wrote 14 lines
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
    ;
    CustomColumns.Add('Otázka');
    CustomColumns.Add('Odpověď');
    RowCount:=13;
    end;
end;
initialization
  TEventTableWidgetDemo.RegisterDemo;
end.

Reply by email