[Pas2js] onevent question

Jean SUZINEAU Jean.Suzineau at wanadoo.fr
Mon Sep 7 23:38:33 CEST 2020


I guess you are not used to using components.

The code below is working for me. The visual aspect is not very good, it 
would be necessary to add line breaks between the questions.

============================

program project1;

{$mode objfpc}

uses
     browserapp, JS, Classes, SysUtils, Web, webwidget, htmlwidgets;

type
  TMyApplication
  =
   class(TBrowserApplication)
     procedure doRun; override;
   end;

  { TQuestion }

  TQuestion
  =
   class
     l: TLabelWidget;
     ti:TTextInputWidget;
     Question, Answer: String;
     constructor Create( _ba: TBrowserApplication; _wp: TWebPage; 
_Question, _Answer: String);
     procedure tiInput( _Sender : TObject; _Event : TJSEvent);
   end;

{ TQuestion }

constructor TQuestion.Create( _ba: TBrowserApplication; _wp: TWebPage;
                               _Question, _Answer: String);
begin
      Question:= _Question;
      Answer  := _Answer;

      ti:=TTextInputWidget.Create(_ba);

      l:=TLabelwidget.Create(_ba);
      l.Text:=_Question;
      l.LabelFor:= ti;

      // Order is important.
      l .Parent:= _wp;
      ti.Parent:= _wp;

      ti.OnInput := @tiInput;
      //ti.OnChange:= @tiInput;

      l .Refresh;
      ti.Refresh;
end;

procedure TQuestion.tiInput( _Sender: TObject; _Event: TJSEvent);
begin
      if ti.value = Answer
      then
          window.alert( 'Success, answer to question '+Question+' is 
'+Answer);
end;

procedure TMyApplication.doRun;
var
    wp: TWebPage;
begin
      wp:=TWebPage.Create(Self);
      wp.Parent:=TViewPort.Create(Nil);


      TQuestion.Create( Self, wp,  'Question 1', 'Answer 1');
      TQuestion.Create( Self, wp,  'Question 2', 'Answer 2');
      TQuestion.Create( Self, wp,  'Question 3', 'Answer 3');

      wp.Refresh;
      Terminate;
end;

var
    Application : TMyApplication;

begin
     Application:=TMyApplication.Create(nil);
     Application.Initialize;
     Application.Run;
     //Application.Free;
end.





More information about the Pas2js mailing list