Category: javascript

I’m able to make a GET request and retrieve some data I want, But I can’t actually get the data where I need it. Everytime I try to assign it to a variable it’s undefined. I’m trying to do it using the request = require(‘https’) + request.get(url, res) + res.on(‘end’, callback) structure.

When I wrap a callback function around req.on he just retrieves me the req object, which is not what I want. I want the result from my callback function.

Here is a sample of what I’m trying to do:

let request = require("https")

    treatedQuery = query.replaceAll(" ","+")
    console.log(treatedQuery)
    url = `https://www.youtube.com/results?search_query=${treatedQuery}+trailer`
    let someVariable = ""

    request.get(url, res => {
        let data = ''

        res.on('data', chunk => {
            data += chunk;
        });

        function someCallback(something) {
            return something
        }

        someVariable = someCallback(res.on('end', () => {
            regex = //watch?v=(.{11})/g
            linkDump = data.match(regex)
            console.log(linkDump[0])
            return linkDump[0]
        }));

    }).on('error', err => {
            console.log('Error: ', err.message);
        });
    
    return someVariable
}

I intend to hand the results of this get to a front-end so a user can click on the link based on the string he passed. I don’t know if this is efficient or if there’s some xyz module or library that I should be using, but I’d rather answers were kept in this scope if possible. Suggesting a completely different approach of some other library/framework will only increase the frustration and anxiety.

I know there are MANY answers about this topic on SO, I’ve especially read the one by Felix How do I return the response from an asynchronous call?, but his solution simply does not apply. That’s because I can’t run what I want inside the callback function, can’t run req.on directly inside the callback and can’t run the inner function on callback either because it just runs before req.on and as such is empty.

Any help is appreciated

I am trying to raise an exception for an constructor method of EventHubBufferedProducerClient but its not working as expected. Am I missing something here.

My class method:

import { EventHubBufferedProducerClient } from '@azure/event-hubs';
import { logger } from '../logger';

this.producer = null;
async connect() {
   
    if (this.producer === null) {
      try {
        this.producer = new EventHubBufferedProducerClient(this.connStr, this.eHub);
      } catch (e) {
        logger.error(`Error while connecting to sEHub${this.eHub}`, e);
      }
    }
  }

Below is my test case:

//In before each
 sandbox = sinon.createSandbox();
 eventHubProducer = EventBusProducer('mockEventHubName', 'mockconnectionString');

 it('should log an error if connection fails', async () => {
      const logSpy = sandbox.spy(logger, 'error');
      
      // Force connection failure by throwing an error
      sandbox.stub(EventHubBufferedProducerClient.prototype, 'constructor').throws(new Error('Connection failed'));

      await eventHubProducer.connect();

      expect(eventHubProducer.producer).to.be.null;
      expect(logSpy.calledWith("Error while connecting to sEHub mockEventHubName")).to.be.true;
    });

I am getting below error:

should log an error if connection fails:
     AssertionError: expected EventHubBufferedProducerClient{ …(9) } to be null
      at Context.<anonymous> (EventBusProducer.test.js)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

I need to check if a date is in between two dates in mongodb.

queryDates={ startDate: 2023-11-19T05:31:18.997Z, endDate:
2023-11-25T05:31:18.997Z }

Document data

fromDate: 2023-11-22T00:00:00.000+00:00, toDate:
2023-11-24T00:00:00.000+00:00

mongoDb query

{
$and: [
{ fromDate: { $gte: queryDates.startDate } },
{ toDate: { $lte: queryDates.endDate } },
],
}

For this case i am getting correct document. But if queryDates.startDate and queryDates.endDate is in between fromDate and endDate, how to write query for that?

I’m working on an Escape room kinda website.
The theme I’m using is called ESCAPE by Themecube with Woocommerce.
The issue is I’m getting the above mentioned error while using the Woocommerce booking plugin.

The error is getting when selecting the date from the calendar(date picker is not working).

Attaching the SS of error below!

The workflow is: When we slect the date, available time slot will show and and we can book when we select the date.

But the date is not getting selected and time slot is not showing.

And this is working fine in another woocommerce theme(Storefront).

Any help is appreciated.
Thank you!

I have connected hosted web application in local machine through nginx. Application is running on localhost:447/xyz . I have edited some file in view(html page) but its not reflected on the browser.
I have checked the root which I mained on the nginx conf file and clear the browser and also checked in incognitomode.

But the changes are not reflecting on the browser.

Below are the details of nginx.conf file and let me know if I did any mistake:-

Thank you

#log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
#                  '$status $body_bytes_sent "$http_referer" '
#                  '"$http_user_agent" "$http_x_forwarded_for"';

#access_log  logs/access.log  main;

sendfile        on;
#tcp_nopush     on;

#keepalive_timeout  0;
keepalive_timeout  65;

#gzip  on;


#=================================
# App - workbench
#=================================

server {
    listen       447;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        root   D:projects\testtest1srcabc-websrcmainwebapp;
        index  index.html index.htm;
    }
    
    location /xyz/ {
        #proxy_pass http://x.x.x.x:8080/abc/;  
        add_header 'Access-Control-Allow-Origin' $http_origin always;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ .php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ .php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /.ht {
    #    deny  all;
    #}
}

# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
#    listen       8000;
#    listen       somename:8080;
#    server_name  somename  alias  another.alias;

#    location / {
#        root   html;
#        index  index.html index.htm;
#    }
#}


# HTTPS server
#
#server {
#    listen       443 ssl;
#    server_name  localhost;

#    ssl_certificate      cert.pem;
#    ssl_certificate_key  cert.key;

#    ssl_session_cache    shared:SSL:1m;
#    ssl_session_timeout  5m;

#    ssl_ciphers  HIGH:!aNULL:!MD5;
#    ssl_prefer_server_ciphers  on;

#    location / {
#        root   html;
#        index  index.html index.htm;
#    }
#}

}

i have an image slider which does not show anything if the image does not have active class on it as it slides through a list of images.

{% for v in m.value.images %}<div class="carousel-item active"> <div class="container">
    <div class="carousel-caption">
      <h1>Another example headline.</h1> </div></div>{% endfor %}

Here, In the Trumbowyg editor of project getting some issue.

Actually when I am trying to add code this in source code:

<p>hello</p><p><br></p>

<label class="click_aerrow">
     <i class="fa fa-angle-down"></i> 
</label>

It’s Automatically converting this code later with SVG tags like below:

<p>hello</p><p><br></p>

<label class="click_aerrow">
     <svg class="svg-inline--fa fa-angle-down fa-w-10" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="angle-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg><!-- <i class="fa fa-angle-down"></i> --> 
</label>

I don’t want to use SVGs in my code. so anyways I can stop this in Trumbowyg Editor?

I tried multiple ways as mentioned in Documentation.

First of all, I tried to use:

$.trumbowyg.svgPath = false;

Then:

$.trumbowyg.svgAbsoluteUsePath = true;

Then I tried to Use semantic Property to remove tags and then I tried to use tagsToKeep property as well. I tried all this options with different combination but some how unable to solve the issue.

I just want that if I write :

<i class="fa fa-angle-down"> </i>

in source code of editor. It should not convert this code to SVG tag. Please anyone help me with this issue.

I really don’t understand how to use this “react-tournament-brackets” library

here is a link https://github.com/g-loot/react-tournament-brackets

i try to read but seems like it’s so hard for me to understand this document

I use reactJS BTW.

can someone help me explain how to use this library? thank you

I have (very circuitously…I know) figured out a way that (at least on my localhost) I can get an external .txt file from a url saved in my Rails database.

I know it’s not the best Rails-y way (TRUST ME I KNOW) but I have tried so many better ways and everything ends in encoding errors. This is the only way I’ve gotten it to work.

Here’s the way the code looks so far:

<main class="container py-5">
  <header class="text-center">
    <h1 class="header-font">A Place for Testing Stuff...</h1>
  </header>


  <% empty_chapters = Chapter.where(text: nil) %>

  <section>
    <h2>Some Info</h2>
    <ul>
      <li><strong>Total Chapters:</strong> <%= number_with_delimiter(Chapter.all.count ) %></li>
      <li><strong>Empty Chapters:</strong> <%= number_with_delimiter(empty_chapters.count ) %></li>
    </ul>
  </section>

  <section>
    <h2>Empty Chapters For Testing</h2>
    <% empty_chapters.limit(10).each do |chapter| %>

      <% aws_url = "https://the-petulant-poetess.s3.us-east-2.amazonaws.com/stories/#{ chapter.story.author.id }/#{ chapter.id }.txt" %>

      <div class="my-4">
        <h5 class="bg-accent-main color-always-white p-3"><%= link_to chapter.title, chapter_path(chapter) %> (<%= link_to chapter.story.title, story_path(chapter.story) %>)</h5>
        
        <%= simple_form_for [chapter] do |f| %>
            <%= f.hidden_field :text, id: "chapter#{ chapter.id }field" %>
            <%= f.submit "Update Chapter Text", class: "btn btn-subtle" %>
        <% end %>


        <p class="strong mb-0 pb-0">AWS Link</p>
        <a href="<%= aws_url %>" target="_blank"><%= aws_url %></a>
        
        <p class="strong mt-3">Database Chapter</p>
        <%= truncate(chapter.text, length: 1000) %>
        
        <p class="strong mt-3">JS Chapter</p>
        <div id="js<%= chapter.id %>"></div>

      </div>
    <% end %>
  </section>

</main>



<script type="text/javascript">
  window.onload = function () {
    <% empty_chapters.limit(10).each do |chapter| %>
      <% aws_url = "https://the-petulant-poetess.s3.us-east-2.amazonaws.com/stories/#{ chapter.story.author.id }/#{ chapter.id }.txt" %>

      var chapter = new Headers();
      chapter.append('Content-Type','text/html; charset=UTF-8');

      fetch('<%= aws_url %>', chapter)
        .then(function (response) {
            return response.arrayBuffer();
        })
        .then(function (buffer) {
            const decoder = new TextDecoder('iso-8859-1');
            const text = decoder.decode(buffer);
            var array_of_lines = text.split("n");
            array_of_lines = array_of_lines.map(i => '<p>' + i + '</p>');
            var string_of_html = array_of_lines.join("").replaceAll('<p></p>','');
            const element = document.getElementById("js<%= chapter.id %>");
            element.innerHTML = string_of_html
            document.getElementById("chapter<%= chapter.id %>field").value = string_of_html
        });

    <% end %>
  }
</script>

Despite the absolutely ridiculous way this code is Macguyvered together, it does actually work on localhost.

Unfortunately, on my production environment on Heroku the encryption errors are back. Now ' and " turn into â, and I wouldn’t be surprised if there were other things getting mis-encoded too. From the lots of research I’ve done, it looks like a UTF-8 encoding issue, but I can’t see why it happens on Heroku not on localhost.

Can anyone help me get this working? It’s getting ridiculous how many different ways I’ve tried to get a simple .txt url uploaded into my rails database only to get shanghaied by encoding errors.

The expected effect looks like below:

I am working with Node-OPCUA as an OPC UA client to interact with a Codesys PLC. I’m using node-opcua version 2.115.0 on an ASUS ZenBook, running Windows 11 Pro, version 10.0.22631 Build 22631. My goal is to acknowledge and confirm alarms from my OPC UA server.

• Current Problem:

I successfully connect to my local Codesys PLC, can see and modify values, and view alarms and their current status. However, when trying to use the acknowledgeCondition or confirmCondition functions to acknowledge an alarm, I encounter an error stating: “Error: cannot find Acknowledge Method”. This is perplexing as I am passing the same values (‘ConditionId’ and ‘EventId’) that EventMonitor.on() provides me.

• Expected Behavior:

The alarms should be acknowledged and reflected in my Codesys PLC. With UAExpert, I can see my alarms and acknowledge and confirm them without issues, leading me to believe the error lies within node-opcua.

Code:
`

    import express from "express";
    import { createServer } from 'node:http';
    import { AttributeIds, OPCUAClient, TimestampsToReturn, constructEventFilter, ObjectIds } from "node-opcua";
                                                                                              
    const app = express();
    const server = createServer(app);

    const URL = "opc.tcp://ADRIAN-ASUS:4840";

    (async () => {
    try {
         const client = OPCUAClient.create();
        client.on("backoff", (retry, delay) => {
         console.log("Retying to connect to ", URL, " attempt ", retry);
        });
   
    console.log("connecting to ", URL);
    await client.connect(URL);
    console.log("connected to ", URL);

   const session = await client.createSession();
    console.log("session initialized");

    const subscripcion = await session.createSubscription2({
        requestedPublishingInterval: 50,
        requestedMaxKeepAliveCount: 20,
        publishingEnabled: true,
    });

    const fields = [
        "EventId",
        "AckedState",
        "AckedState.Id",
        "ConfirmedState",
        "ConfirmedState.Id",
        "ConditionId",
    ];

    const eventFilter = constructEventFilter(fields);

    const itemToMonitor = {
        nodeId: ObjectIds.Server,
        attributeId: AttributeIds.EventNotifier,
    };

    const parameters = {
        filter: eventFilter,
        discardOldest: true,
        queueSize: 100,
    };

    const EventMonitor = await subscripcion.monitor(
        itemToMonitor,
        parameters,
        TimestampsToReturn.Both
    )

    const alarmData = {
    }

    EventMonitor.on("changed", (events) => {
        for (let i = 0; i < events.length; i++) {
            alarmData[fields[i]] = events[i].value
        }
    });

    setTimeout( async () => {

        try {
            const comment = 'Comment random';

            console.log({conditionId: alarmData.ConditionId, eventId: alarmData.EventId})

            session.acknowledgeCondition(alarmData.ConditionId, alarmData.EventId, comment, (err) => {
                console.log({ err })
            }) 
        } catch (error) {
            console.log(error)
        }

    }, 5000)



    let running = true;
    process.on("SIGINT", async () => {
        if (!running) {
            return; // avoid calling shutdown twice
        }
        console.log("shutting down client");
        running = false;
        await subscripcion.terminate();
        await session.close();
        await client.disconnect();
        console.log("Done");
        process.exit(0);
    });
} catch (error) {
    console.log("ERROR: ", error.message);
    console.log(error);
}

server.listen(4000, () => {
    console.log('server running at http://localhost:4000');
})
     })()`

• Errors and Logs:

Error when attempting to acknowledge the alarm:
Error Log

Output of console.log showing the ‘conditionId’ and ‘eventId’ values:
Console.log conditionId and eventId data

Additional Information:

• I have installed node-opcua as a package using npm.
• Using Node 20.10.0
• I am attempting to connect to an OPCUA system: CODESYS Control Win V3 x64, version 3.5.19.3 (x64).

Try downloading all the previous versions of node.

I was trying to check if the children (AssetExample2) of my parent (AssetExample) component have their own children. I would use this pattern for the splashscreen of the app that I’m building to hide when children have loaded but I can’t seem to make it work as the state hasChildren that I created always returns false what am I doing wrong here?

Snack runnable sample code

// App.js

import { Text, SafeAreaView, StyleSheet } from 'react-native';

import { Card } from 'react-native-paper';

import AssetExample from './components/AssetExample';
import AssetExample2 from './components/AssetExample2';

export default function App() {
  return (
    <SafeAreaView>
      <Text>
        I don't have children
      </Text>
      <Card>
        <AssetExample>
          <AssetExample2 />
        </AssetExample>
      </Card>
    </SafeAreaView>
  );
}

// AssetExample

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';

export default function AssetExample({children}) {
  const [hasChildren, setHasChildren] = useState(false);

  useEffect(() => {
    React.Children.forEach(children, (child) => {
    if (!React.isValidElement(child)) {
      if (child.props.children) {
        setHasChildren(true);
      }
    }
  });
  }, [children]);

  return (hasChildren && 
    <View>
      <Text>
        I have children
      </Text>
    </View>
  );
}

// AssetExample2

import { Text, View } from 'react-native';

export default function AssetExample2() {
  return (<View><Text>I exist</Text></View>);
}

```
const arr = [5,1,3,2,6];
const output = arr.reduce(function (acc, curr){
    acc = acc + curr;
    return acc;
}, 0);
console.log(output);
```

since there is return statement there, why the reduce function keeps iterating as return statement ends any loop or function as per my knowledge.

I have met a weird behavior of async/await browser fetch API with large file such as:

• When using async/ await with fetch api to call rest api → the code is executed sequentially

await fetch("https://jsonplaceholder.typicode.com/todos/1");
console.log("res 1");
await fetch("https://jsonplaceholder.typicode.com/todos/1");
console.log("res 2");
await fetch("https://jsonplaceholder.typicode.com/todos/1");
console.log("res 3");

apis are fetched sequentially (view in Network tab) → it means that the second api just run after the first one is finished, etc …

I also test this behavior by slowing down network → console.log is also executed with the latter wait the former finish.

But

• When using async/ await with fetch api to download large files → the code is also executed sequentially but the browser fetch (download) files in parallel.

await fetch(
"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4");
console.log("fetch 1");

await fetch(
"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4");

console.log("fetch 2");

await fetch("http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4");
console.log("fetch 3");

The weird thing is browser fetch api does not wait until the fetch done:

• The console.log are print almost immediately (it works as if the await keyword is ignored).

• Tab network in debug tool show that these files are fetched (downloaded) in parrallel.

P/s: I also test with axios and this library work OK (in both cases the api is just executed after the previous one done)

I’m looking for assistance with implementing drag-and-drop functionality, including an extra condition for dropping items onto specific locations. While I’ve made progress, I believe there’s room for improvement. Any guidance you can offer would be greatly appreciated as I work towards completing this screen. Thank you in advance.

import { View, Text, SafeAreaView, ImageBackground,StatusBar,Image,Dimensions, TouchableOpacity,ScrollView, FlatList, Animated,  PanResponder } from 'react-native'
import React,{useState,useContext, useRef} from 'react'
import themeContext from '../theme/themeContex';
import { useNavigation } from '@react-navigation/native';
import BackButton from './Componants/BackButton';
import Header from './Componants/Header';
import {DraxView, DraxProvider } from 'react-native-drax';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

const width =Dimensions.get('screen').width
const height = Dimensions.get('screen').height




export default function VowelSounds() {
  

  const theme = useContext(themeContext);
  const navigation= useNavigation();
  const [darkMode,setDarkMode] = useState(false)


  const [animatedValue] = useState(new Animated.ValueXY({ x: 0, y: 0 }));

  const handleDrop = (payload, gestureState) => {
    
    console.log('Drop event triggered with payload:', payload, gestureState);
    
    // Update the animated position on drop
   if (gestureState) {
      const { moveX, moveY } = gestureState;
      // Update the animated position on drop
      Animated.spring(animatedValue, {
        toValue: { x:-19, y: -210.53425 },
        useNativeDriver: true,
      }).start();
    }
  };
  const [animatedValue2] = useState(new Animated.ValueXY({ x: 0, y: 0 }));
  const handleDrop2 = (payload, gestureState) => {
    
    console.log('Drop event triggered with payload:', payload, gestureState);
    
    // Update the animated position on drop
   if (gestureState) {
      const { moveX, moveY } = gestureState;
      // Update the animated position on drop
      Animated.spring(animatedValue2, {
        toValue: { x:-170, y: -270.53425 },
        useNativeDriver: true,
      }).start();
    }
  };
  const [animatedValue3] = useState(new Animated.ValueXY({ x: 0, y: 0 }));
  const handleDrop3 = (payload, gestureState) => {
    
    console.log('Drop event triggered with payload:', payload, gestureState);
    
    // Update the animated position on drop
   if (gestureState) {
      const { moveX, moveY } = gestureState;
      // Update the animated position on drop
      Animated.spring(animatedValue3, {
        toValue: { x:-20, y: -180.53425 },
        useNativeDriver: true,
      }).start();
    }
  };
  const [animatedValue4] = useState(new Animated.ValueXY({ x: 0, y: 0 }));
  const handleDrop4 = (payload, gestureState) => {
    
    console.log('Drop event triggered with payload:', payload, gestureState);
    
    // Update the animated position on drop
   if (gestureState) {
      const { moveX, moveY } = gestureState;
      // Update the animated position on drop
      Animated.spring(animatedValue4, {
        toValue: { x:-10, y: -130.53425 },
        useNativeDriver: true,
      }).start();
    }
  };
  const [animatedValue5] = useState(new Animated.ValueXY({ x: 0, y: 0 }));
  const handleDrop5 = (payload, gestureState) => {
    
    console.log('Drop event triggered with payload:', payload, gestureState);
    
    // Update the animated position on drop
   if (gestureState) {
      const { moveX, moveY } = gestureState;
      // Update the animated position on drop
      Animated.spring(animatedValue5, {
        toValue: { x:10, y: -270.53425 },
        useNativeDriver: true,
      }).start();
    }
  };
  const [animatedValue6] = useState(new Animated.ValueXY({ x: 0, y: 0 }));
  const handleDrop6 = (payload, gestureState) => {
    
    console.log('Drop event triggered with payload:', payload, gestureState);
    
    // Update the animated position on drop
   if (gestureState) {
      const { moveX, moveY } = gestureState;
      // Update the animated position on drop
      Animated.spring(animatedValue6, {
        toValue: { x:95, y: -210.53425 },
        useNativeDriver: true,
      }).start();
    }
  };
  const [animatedValue7] = useState(new Animated.ValueXY({ x: 0, y: 0 }));
  const handleDrop7 = (payload, gestureState) => {
    
    console.log('Drop event triggered with payload:', payload, gestureState);
    
    // Update the animated position on drop
   if (gestureState) {
      const { moveX, moveY } = gestureState;
      // Update the animated position on drop
      Animated.spring(animatedValue7, {
        toValue: { x:-70, y: -130.53425 },
        useNativeDriver: true,
      }).start();
    }
  };
  const [animatedValue8] = useState(new Animated.ValueXY({ x: 0, y: 0 }));
  const handleDrop8 = (payload, gestureState) => {
    
    console.log('Drop event triggered with payload:', payload, gestureState);
    
    // Update the animated position on drop
   if (gestureState) {
      const { moveX, moveY } = gestureState;
      // Update the animated position on drop
      Animated.spring(animatedValue8, {
        toValue: { x:175, y: -190.53425 },
        useNativeDriver: true,
      }).start();
    }
  };
    return (
    <GestureHandlerRootView style={{flex:1}}>
      <SafeAreaView style={{flex:1, paddingTop:25}}>
              
        

        <ImageBackground source={require('../../assets/image/read.png')}
        style={{flex:1}}>
          <StatusBar backgroundColor={"#C2EEFF"} translucent={true}/>
      
            <Header />
            <ScrollView>
              <View style={{paddingHorizontal:20}}>
                <Text style={{fontFamily:'BADABB', fontSize:21, color:'#E51F5C', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:21,}}>Level 01</Text>
                <Text style={{fontFamily:'BADABB', fontSize:21, color:'#E51F5C', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:21, marginBottom:15,}}>Aa and Ee Vowel Sounds</Text>
                <Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Match the pictures of these vowels to their correct words and boxes! </Text>
              </View>
              <DraxProvider>
              <View style={{flexDirection:'row', justifyContent:'space-between', paddingHorizontal:20, marginTop:25,}}>
                  <View  style={{width:'47%', }} >
                    <ImageBackground style={{paddingHorizontal:15, paddingVertical:20,}} source={require('../../assets/image/vs.png')} resizeMode='stretch'>
                      <Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Short Aa</Text>
                      <View style={{flexDirection:'row', justifyContent:'space-around', flexWrap:'wrap', marginTop:10}}>
                          <View style={{width:'46%', borderWidth:1, borderColor:'#000', height:80, padding:5, marginBottom:5}}>
                            <Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Cat</Text>
                            {/* <Image source={require('../../assets/image/cat2.png')}  style={{alignSelf:'center'}}/> */}
                            
                                <DraxView
                                  style={{height:60,}}
                                  payloadTarget={['cat']}
                                  onReceiveDragDrop={({ dragged: { payload }, ...gestureState }) => handleDrop(payload, gestureState)}
                                >
                                  
                                </DraxView>
                              
                          </View>
                          <View style={{width:'46%', borderWidth:1, borderColor:'#000', height:80, padding:5, marginBottom:5}}>
                            <Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Fan</Text>
                            
                                <DraxView
                                  style={{height:60,}}
                                  payloadTarget={['fan']}
                                  onReceiveDragDrop={({ dragged: { payload }, ...gestureState }) => handleDrop2(payload, gestureState)}
                                >
                                  
                                </DraxView>
                              
                          </View>
                          <View style={{width:'46%', borderWidth:1, borderColor:'#000', height:80, padding:5}}>
                            <Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Jam</Text>
                            
                                <DraxView
                                  style={{height:60,}}
                                  payloadTarget={['jam']}
                                  onReceiveDragDrop={({ dragged: { payload }, ...gestureState }) => handleDrop3(payload, gestureState)}
                                >
                                  
                                </DraxView>
                              
                          </View>
                          <View style={{width:'46%', borderWidth:1, borderColor:'#000', height:80, padding:5}}>
                            <Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Bat</Text>
                            
                            <DraxView
                                  style={{height:60,}}
                                  payloadTarget={['bat']}
                                  onReceiveDragDrop={({ dragged: { payload }, ...gestureState }) => handleDrop4(payload, gestureState)}
                                >
                                  
                                </DraxView>
                              
                          </View>
                      </View>
                    </ImageBackground>
                  </View>
                  <View  style={{width:'47%', }} >
                    <ImageBackground style={{paddingHorizontal:15, paddingVertical:20,}} source={require('../../assets/image/vs.png')} resizeMode='stretch'>
                      <Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Long Aa</Text>
                      <View style={{flexDirection:'row', justifyContent:'space-around', flexWrap:'wrap', marginTop:10}}>
                          <View style={{width:'46%', borderWidth:1, borderColor:'#000', height:80, padding:5, marginBottom:5}}>
                            <Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Drain</Text>
                            
                            <DraxView
                                  style={{height:60,}}
                                  payloadTarget={['drain']}
                                  onReceiveDragDrop={({ dragged: { payload }, ...gestureState }) => handleDrop5(payload, gestureState)}
                                >
                                  
                                </DraxView>
                              
                          </View>
                          <View style={{width:'46%', borderWidth:1, borderColor:'#000', height:80, padding:5, marginBottom:5}}>
                            <Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Cake</Text>
                            
                            <DraxView
                                  style={{height:60,}}
                                  payloadTarget={['cake']}
                                  onReceiveDragDrop={({ dragged: { payload }, ...gestureState }) => handleDrop6(payload, gestureState)}
                                >
                                  
                                </DraxView>
                              
                          </View>
                          <View style={{width:'46%', borderWidth:1, borderColor:'#000', height:80, padding:5}}>
                            <Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Rain</Text>
                            
                            <DraxView
                                  style={{height:60,}}
                                  payloadTarget={['rain']}
                                  onReceiveDragDrop={({ dragged: { payload }, ...gestureState }) => handleDrop7(payload, gestureState)}
                                >
                                  
                                </DraxView>
                              
                          </View>
                          <View style={{width:'46%', borderWidth:1, borderColor:'#000', height:80, padding:5}}>
                            <Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Lake</Text>
                            
                            <DraxView
                                  style={{height:60,}}
                                  payloadTarget={['lake']}
                                  onReceiveDragDrop={({ dragged: { payload }, ...gestureState }) => handleDrop8(payload, gestureState)}
                                >
                                  
                                </DraxView>
                              
                          </View>
                      </View>
                    </ImageBackground>
                  </View>
                  
              </View>
              <View style={{paddingHorizontal:20, marginTop:35,}}>
                  <ImageBackground style={{ paddingVertical:25,  paddingHorizontal:20}} source={require('../../assets/image/vs2.png')} resizeMode='stretch' >
                        <View style={{flexDirection:'row', justifyContent:'space-around', flexWrap:'wrap', marginTop:10}}>
                            <View style={{width:'23%', alignContent:'center', alignItems:'center',  height:55, padding:5, marginBottom:5}}>
                              
                                <DraxView onDragStart={() => console.log('Cat drag started')}  payload="cat"  style={{position: 'absolute',
                transform: [{ translateX: animatedValue.x }, { translateY: animatedValue.y }]}} >
                                 
                                    <Image source={require('../../assets/image/cat2.png')}  />
                                 
                                  </DraxView>
                              
                            </View>
                            <View style={{width:'23%', alignContent:'center', alignItems:'center',  height:55, padding:5, marginBottom:5}}>
                              
                                  <DraxView onDragStart={() => console.log('Bat drag started')}  payload="bat" style={{position: 'absolute',
                transform: [{ translateX: animatedValue4.x }, { translateY: animatedValue4.y }]}}> 
                                    <Image source={require('../../assets/image/bat.png')}  />
                                  </DraxView>
                              
                            </View>
                            <View style={{width:'25%', alignContent:'center', alignItems:'center',  height:55, padding:5}}>
                              
                                <DraxView onDragStart={() => console.log('Cake drag started')}  payload="cake" style={{position: 'absolute',
                transform: [{ translateX: animatedValue6.x }, { translateY: animatedValue6.y }]}}>
                                  <Image source={require('../../assets/image/cake.png')}  />
                                </DraxView>
                              
                            </View>
                            <View style={{width:'23%', alignContent:'center', alignItems:'center',  height:55, padding:5}}>
                              
                                <DraxView onDragStart={() => console.log('Rain drag started')}  payload="rain" style={{position: 'absolute',
                transform: [{ translateX: animatedValue7.x }, { translateY: animatedValue7.y }]}}>
                                  <Image source={require('../../assets/image/rain.png')}  />
                                </DraxView>
                              
                            </View>
                            <View style={{width:'23%', alignContent:'center', alignItems:'center',  height:55, padding:5, marginBottom:5}}>
                              
                                <DraxView onDragStart={() => console.log('Jam drag started')}  payload="jam" style={{position: 'absolute',
                transform: [{ translateX: animatedValue3.x }, { translateY: animatedValue3.y }]}}>
                                  <Image source={require('../../assets/image/jam.png')}  />
                                </DraxView>
                              
                            </View>
                            <View style={{width:'23%', alignContent:'center', alignItems:'center',  height:55, padding:5, marginBottom:5}}>
                              
                                  <DraxView onDragStart={() => console.log('Lake drag started')}  payload="lake" style={{position: 'absolute',
                transform: [{ translateX: animatedValue8.x }, { translateY: animatedValue8.y }]}}>
                                    <Image source={require('../../assets/image/lake.png')} />
                                  </DraxView>
                              
                            </View>
                            <View style={{width:'23%', alignContent:'center', alignItems:'center',  height:55, padding:5}}>
                              
                                  <DraxView onDragStart={() => console.log('Drain drag started')}  payload="drain" style={{position: 'absolute',
                transform: [{ translateX: animatedValue5.x }, { translateY: animatedValue5.y }]}}>
                                    <Image source={require('../../assets/image/drain.png')}  />
                                  </DraxView>
                              
                            </View>
                            <View style={{width:'23%', alignContent:'center', alignItems:'center',  height:55, padding:5}}>
                              
                                  <DraxView onDragStart={() => console.log('Fan drag started')}  payload="fan" style={{position: 'absolute',
                transform: [{ translateX: animatedValue2.x }, { translateY: animatedValue2.y }]}}>
                                    <Image source={require('../../assets/image/fan.png')} />
                                  </DraxView>
                              
                            </View>
                        </View>
                  </ImageBackground>
              </View>
              </DraxProvider>
            </ScrollView>

            <View style={{flex:1, paddingHorizontal:20, marginBottom:30}}>
                  
            </View>
            <BackButton style={{width:'100%',}}/>
        </ImageBackground>
              
      </SafeAreaView>
    </GestureHandlerRootView>
  )
}