Add counter variable to keep track

204 views
Skip to first unread message

Osama

unread,
Aug 26, 2019, 6:37:53 AM8/26/19
to MIT App Inventor Forum
Hello friends,

I need to complete a swipe left and right csv but I need to know how to add counter variable to keep track of where you I am.

<!DOCTYPE html>
   <head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>


</head>
<body>

      
      <script>
         $(document).on("pagecreate","#page1",function() {
            $("body").on("swipeleft",function(){
            $("span").text(window.AppInventor.getWebViewString());
            });
         });
      </script>
 <script>
         $(document).on("pagecreate","#page1",function() {
            $("body").on("swiperight",function() {
              $("span").text(window.AppInventor.getWebViewString());
            });
         });
      </script>
   </head>
   
   <body>
      <div data-role = "page" id = "page1">
         <div data-role = "header">
            <h2>Header</h2>
         </div>

         <div data-role = "main" class = "ui-content">
            <p>It will display the text when you swipe left side.</p>
            <span style = "color:orange"></span>
         </div>

   </body>
</html>
Text.html
blocks.png

TimAI2

unread,
Aug 26, 2019, 7:07:54 AM8/26/19
to mitappinv...@googlegroups.com
Something like this:

<script>
var counter = 0; // will reset each time the page loads, so you may need a WebViewString value passed by the app to set this ? !!!
var pages = 20; // for example - also could be set by WebViewString value from app
</script>

<script>
         $(document).on("pagecreate","#page1",function() {
            $("body").on("swipeleft",function(){
            $("span").text(window.AppInventor.getWebViewString());
            });
         });
         if ( counter !== pages ) {
         counter = counter + 1;
window.AppInventor.setWebViewString(counter); // sets WebViewString if needed
         }
 </script>
 <script>
         $(document).on("pagecreate","#page1",function() {
            $("body").on("swiperight",function() {
              $("span").text(window.AppInventor.getWebViewString());
            });
         });
         if ( counter !== 0 ) {
         counter = counter - 1;
window.AppInventor.setWebViewString(counter); // sets WebViewString if needed
         }
 </script>

You should have been able to work this out yourself using your new found research and learning skills, plus what is available at w3schools
As you can see your webviewstring management is vital to the success of operation here

Osama

unread,
Aug 26, 2019, 8:20:00 AM8/26/19
to MIT App Inventor Forum
Thank you so much Tim for giving me the opportunity to help me in order to complete my app.
Actually I have added the code into my Text.html but it just giving me value : zero.


Please have a look to .aia



Text.html

TimAI2

unread,
Aug 26, 2019, 8:47:32 AM8/26/19
to mitappinv...@googlegroups.com
Yes, sorry, script sections should look like this:

<script>
var counter = 0; // will reset each time the page loads, so you may need a WebViewString value passed by the app to set this ? !!!
var pages = 20; // for example - also could be set by WebViewString vlaue from app
</script>

<script>
         $(document).on("pagecreate","#page1",function() {
            $("body").on("swipeleft",function(){
    if ( counter !== 0 ) { counter = counter - 1; 
            $("span").text(counter);
    };
            });
         });
         
 </script>
 <script>
         $(document).on("pagecreate","#page1",function() {
            $("body").on("swiperight",function() {
    if ( counter !== pages ) { counter = counter + 1;
            $("span").text(counter);
    }
            });
         });
         
 </script>


Osama

unread,
Aug 26, 2019, 8:58:42 AM8/26/19
to MIT App Inventor Forum
Hi Tim,
It looks much better now but how can I view the csv instead of numbers from 1 to 20

TimAI2

unread,
Aug 26, 2019, 9:35:30 AM8/26/19
to MIT App Inventor Forum
Again, you have all the resources to work this out yourself!

Osama

unread,
Aug 26, 2019, 10:09:21 AM8/26/19
to MIT App Inventor Forum
Differently you are right but I have lack of experience. I don't know what should I do next. Should I do something in SetText block in order to as you said previously "You will now have to work out the interactivity between the html and the app using the webviewstring. As previously mentioned a counter will be needed in the html on each swipe (using a variable!) to send a value back to the app using webviewstring for the app to serve up a different page." ?

blocks (1).png

TimAI2

unread,
Aug 26, 2019, 12:24:49 PM8/26/19
to MIT App Inventor Forum
See attached...
blocks (1) (1).png

Osama

unread,
Aug 26, 2019, 2:33:35 PM8/26/19
to MIT App Inventor Forum
Hello Tim,

Still I feel some confuse about what I am doing. I need some little detail please. I appreciate of your help.
blocks (2).png

Osama

unread,
Aug 27, 2019, 4:28:24 AM8/27/19
to MIT App Inventor Forum
Hello Tim,

Since yesterday I was trying to work out with that block but sorry to tell you that I was not be able to do it. It's really very difficult.

Osama

unread,
Aug 27, 2019, 6:45:56 AM8/27/19
to MIT App Inventor Forum
Hello Tim,
I'm still thinking about how to complete the work but unfortunately I don't have any idea do it.
I suggest if you agree with me to give me a hint and I complete it like previous time. With all appreciation of your great effort.

Osama

unread,
Aug 27, 2019, 8:47:45 AM8/27/19
to MIT App Inventor Forum
Hello Tim,
I have changed :
 $("span").text(counter);

To:

 $("span").text(window.AppInventor.getWebViewString());

Is it correct?

TimAI2

unread,
Aug 27, 2019, 2:51:39 PM8/27/19
to MIT App Inventor Forum
https://puravidaapps.com/snippets.php#2webviewstring  (again!)

Ghica

unread,
Aug 27, 2019, 3:40:47 PM8/27/19
to MIT App Inventor Forum

component_event.png


Osama, assuming that swiping left or right means that you want to show the next or the previous surah, remember that you need a lot of housekeeping to make that happen. 
Cheers, Ghica.

Osama

unread,
Aug 27, 2019, 4:08:37 PM8/27/19
to MIT App Inventor Forum
Thank you Tim for this good resource. I will have a look to it and I will try to learn more.

Osama

unread,
Aug 27, 2019, 4:11:04 PM8/27/19
to MIT App Inventor Forum
Hi Ghica,
Thank you so much. I will do my best and try to work out with it.

Osama

unread,
Aug 27, 2019, 4:27:06 PM8/27/19
to MIT App Inventor Forum
Hi Tim and Ghica,
I have build WebViewStringChange.
Please check if it's ok.
Thank you
blocks (1).png
blocks.png

TimAI2

unread,
Aug 27, 2019, 5:32:10 PM8/27/19
to MIT App Inventor Forum
Did you try it? what works, what doesn't work...

Osama

unread,
Aug 27, 2019, 11:19:41 PM8/27/19
to MIT App Inventor Forum
Yes, I did. I have build the webstringchange but it doesn't work at all.

TimAI2

unread,
Aug 28, 2019, 3:09:22 AM8/28/19
to MIT App Inventor Forum
So your blocks/code/html are not "OK". Think it through, try something else.

My guess is the value tests, between 0.5 and -0.5 ? You may need to replicate the counter used in the html in the blocks?

Osama

unread,
Aug 28, 2019, 4:37:08 AM8/28/19
to MIT App Inventor Forum
Hello Tim,
I have tried the below code as you guide me to replicate the counter in the html:
<!DOCTYPE html>
   <head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>


</head>
<body>

    <script>
var counter = 0; // will reset each time the page loads, so you may need a WebViewString value passed by the app to set this ? !!!
var pages = 20; // for example - also could be set by WebViewString vlaue from app
</script>

<script>

window.setInterval(function(){
         $(document.getElementById).on("pagecreate","#page1",function() {
            $("body").on("swipeleft",function(){
if (window.AppInventor.getWebViewString() == ( counter !== 0 ) { counter = counter - 1;
            window.AppInventor.setWebViewString$("span").text(counter);
    };
            });
         });
         
 </script>
 <script>
         $(document.getElementById).on("pagecreate","#page1",function() {
            $("body").on("swiperight",function() {
if (window.AppInventor.getWebViewString() == ( counter !== pages ) { counter = counter + 1;
             window.AppInventor.setWebViewString$("span").text(counter);
    }
            });
         });
         
 </script>

   </head>
   
   <body>
      <div data-role = "page" document.getElementByIdId = "page1">

Osama

unread,
Aug 28, 2019, 6:41:41 AM8/28/19
to MIT App Inventor Forum
Hello Tim,
I have tried also to build the block as you guide me to replicate the counter in the block.
Untitled.png

Ghica

unread,
Aug 28, 2019, 7:06:00 AM8/28/19
to MIT App Inventor Forum
Osama,
Rule number one: test what happens! Is the WebViewStringChange block triggered? 
If no, the is something wrong with your HTML.
If yes, what is the value returned?? You can find out using a notifier, or assign value to a global variable and use DoIt.
Solve this and tell the result.

Then, you have an if without a condition, what is it supposed to do?
Another really basic error: you assign text to the value variable, but it contains the input from the event block. You do not want to overwrite it.
And, where is the page number kept in the app? You should know.

Cheers, Ghica.

Osama

unread,
Aug 28, 2019, 7:15:21 AM8/28/19
to MIT App Inventor Forum
It's really a very difficult for me. I don't need it any more.
Thank you very much.

Osama

unread,
Aug 28, 2019, 9:09:14 AM8/28/19
to MIT App Inventor Forum
Hi Ghica,

I am sorry because I said "I don't need it any more."
I will continue until complete it because I want to learn and I will not surrender.

Osama

unread,
Aug 29, 2019, 2:49:57 AM8/29/19
to MIT App Inventor Forum
Hello Tim,
Again I am sorry that I said"I don't need it any more" Because I have got a very headache at that time when I said it.
I need to continue complete the work out if you don't mind.
Please check the code and tell me what shall I do to make any correction.

TimAI2

unread,
Aug 29, 2019, 4:16:58 AM8/29/19
to MIT App Inventor Forum
Suggest go back to the script I previously provided and start again, you seem to have simply added things randomly to your script without consideration.

scriptissues.png


Chris Ward

unread,
Aug 29, 2019, 5:37:37 AM8/29/19
to MIT App Inventor Forum
Osama

You can check your own code by running it and observing the results - that is what everybody else is doing.

You are finding relatively simple code difficult to write - which says to me you would be better off attending a basic course first (online or off), so that you have foundations from which you can confidently grow. That's how everybody else starts.

You wouldn't buy a piano and expect to be able to just read a music sheet and play Mozart's Piano Sonta No 11 without having lessons first, right?  Same with programming.

Ghica

unread,
Aug 29, 2019, 6:35:20 AM8/29/19
to MIT App Inventor Forum
@Chris and Tim,
Osama said: I don't need it any more.
Let us please respect that. If only because if he would succeed, he would need to integrate it in his app, which he is not able to do and I am certainly absolutely not going to do it.

@Osama,
Enough is enough. Maybe you could be satisfied with your app as it is.

Cheers, Ghica.

Osama

unread,
Aug 29, 2019, 7:14:54 AM8/29/19
to MIT App Inventor Forum
@Ghica,

You don't have an idea that I am highly respect you and admire you so much. So, believe me I will do all my best in order to accomplish that work because I am enthusiastic. I hope you give me a chance to do it.

Osama

unread,
Aug 29, 2019, 1:31:41 PM8/29/19
to MIT App Inventor Forum
I have wrote the html code. Kindly have a look to it if it is write:

</script>

<script>
         $(document).on("pagecreate","#page1",function() {
            $("body").on("swipeleft",function(){
            $("span").text(window.AppInventor.getWebViewString());
            });
         });
         if ( counter !== pages ) {
         counter = counter + 1;
window.AppInventor.setWebViewString(counter); 
         }
 </script>
 <script>
         $(document).on("pagecreate","#page1",function() {
            $("body").on("swiperight",function() {
              $("span").text(window.AppInventor.getWebViewString());
            });
         });
         if ( counter !== 0 ) {
         counter = counter - 1;
window.AppInventor.setWebViewString(counter); 
         }
 </script>
 

Chris Ward

unread,
Aug 29, 2019, 2:31:13 PM8/29/19
to MIT App Inventor Forum
Hi Osama

What happens when you test your code?

Osama

unread,
Aug 29, 2019, 2:34:40 PM8/29/19
to MIT App Inventor Forum
Hello Chris,
I am still testing (do it). So, there has no result yet

Osama

unread,
Aug 29, 2019, 2:58:04 PM8/29/19
to MIT App Inventor Forum
Hi Chris,
I have built the blocks. Kindly, have a look if it is right.
I have tested:
When I swipe left or right, the page appear for a while then disappear.

blocks (4).png
blocks (5).png

Chris Ward

unread,
Aug 29, 2019, 3:30:33 PM8/29/19
to MIT App Inventor Forum
Hi Osama

When I swipe left or right, the page appear for a while then disappear.

So, study your code and work out why that could happen. 

Osama

unread,
Aug 29, 2019, 3:36:44 PM8/29/19
to MIT App Inventor Forum
Now, I am doubtful. Can you please tell me what is wrong and what is right in order to not mix the code and the blocks again. So, that will be simple to me to know why that could happen.

Osama

unread,
Aug 30, 2019, 12:09:20 PM8/30/19
to MIT App Inventor Forum
Hi Chris,

Can you please tell me what is wrong and what is right in order to not mix the code and the blocks again. So that will be easy for me to know why that could happen.

Thank you so much.

Osama

unread,
Aug 30, 2019, 3:17:51 PM8/30/19
to MIT App Inventor Forum
Hello Tim & Chris

I am sorry to bother you all the time,,

Actually I have built the code in html as you learned me last time and I have double checked the code. For me it looks fine but the problem is how to make the block in app.

Osama

unread,
Aug 30, 2019, 4:02:07 PM8/30/19
to MIT App Inventor Forum
I have built the blocks. Please advise me.

blocks (6).png

Osama

unread,
Aug 30, 2019, 4:38:57 PM8/30/19
to MIT App Inventor Forum
Hi Tim

Kindly have a look to my code please.

</script>

<script>
$(document).on("pagecreate","#page1",function() {


$("body").on("swipeleft",function(){

$("span").text(window.AppInventor.getWebViewString());
});
});

if ( counter !== pages ) {


counter = counter + 1;

window.AppInventor.setWebViewString(counter);
}
</script>
<script>
$(document).on("pagecreate","#page1",function() {


$("body").on("swiperight",function() {

$("span").text(window.AppInventor.getWebViewString());
});
});

if ( counter !== 0 ) {


counter = counter - 1;

window.AppInventor.setWebViewString(counter);
}
</script>

Chris Ward

unread,
Aug 30, 2019, 5:31:41 PM8/30/19
to MIT App Inventor Forum
Hi Osama

To Test your HTML, temporarily replace (comment out) the App Inventor Web String code and replace it with a JavaScript Alert(); You can then open your HTML file in your computer Browser (Chrome, FireFox) and see if it runs as you expect.

Osama

unread,
Aug 31, 2019, 2:00:56 AM8/31/19
to MIT App Inventor Forum
Hi Chris,

The HTML code is working fine. But the problem that I am facing difficult to build the blocks in App Inventor
blocks (6).png
Message has been deleted

Ghica

unread,
Aug 31, 2019, 4:12:08 AM8/31/19
to MIT App Inventor Forum
@Harrison
If you have a new subject, start a new thread. An do not SHOUT (WRITE IN CAPITALS) at us. It is very offensive. You have set up yourself for a delay in your answer. I will delete your post.
Cheers, Ghica.

Chris Ward

unread,
Aug 31, 2019, 6:13:10 AM8/31/19
to MIT App Inventor Forum
Hi Osama

In that case, test test test!

Osama

unread,
Aug 31, 2019, 7:51:52 AM8/31/19
to MIT App Inventor Forum
Hi Chris,
I have tested and tested but no result yet. Please I need advise.

blocks.png
blocks (1).png

Chris Ward

unread,
Aug 31, 2019, 8:16:13 AM8/31/19
to MIT App Inventor Forum
... Test some more - does the code throw an error? If so, look-up the error number, which gives a clue about what is wrong. Add a TextBox  and set it with the WebStringValue, to see if it is as expected while the App runs. If you run the App on your phone via the Companion, right click on Blocks of interest and select 'Do It' to see the current values while the App runs. This is how everybody roots-out issues to fix them.

Osama

unread,
Aug 31, 2019, 1:14:23 PM8/31/19
to MIT App Inventor Forum
I have tested with right click on blocks and selected "Do it" after I run the App on my phone via the Companion. But I don't know how to add a TextBox and set it with the WebStringValue.
Message has been deleted

Osama

unread,
Sep 1, 2019, 1:35:16 AM9/1/19
to MIT App Inventor Forum
Hello Chris,
I have double checked the block according to the html code but I don't know what is wrong. Kindly check with me how to solve the problem because you are an expert on them and I have lack of knowledge on building the blocks 
Thank you so much. If you would like to send you .aia it would be much better to see how it works,
I really appreciate of your effort and job.
Text.html
blocks.png
Message has been deleted

Osama

unread,
Sep 1, 2019, 2:19:21 PM9/1/19
to MIT App Inventor Forum
Hi my friends,

I know that I disturb you all the time but I don't have another way to learn and know how to build the block. I like to learn but it need a lot of time. It might be two or three years but not only 2 or 3 days. So, please help me.

Osama

unread,
Sep 3, 2019, 8:58:02 AM9/3/19
to MIT App Inventor Forum
Hello Tim,

I tried to build a block in order to make swipe left or right so please check if it is correct or not.
Thank you so much.
blocks (1).png
blocks.png

TimAI2

unread,
Sep 3, 2019, 3:05:39 PM9/3/19
to MIT App Inventor Forum
I will quote Ghica on this:

"Asking for support because we could solve something quicker than you could, is not why we are answering questions. We want to help people to find their own solutions, not to do the work for them."

The Power Users here will not be doing any more "work" for you.
You need to find someone who will (paid/unpaid) or
spend some time learning so you can do it yourself.

Good luck with your project into the future
Reply all
Reply to author
Forward
This conversation is locked
You cannot reply and perform actions on locked conversations.
0 new messages