====== Conversation ======
====Finished product====
{{ :developer_center:developer_editor:script:202408242050.mp4 |}}
==== UI Design ====
{{ :developer_center:developer_editor:script:202408242050_1_.mp4?800 |}}

====Script ====
<code LUA>
local next_button = nil
local previous_button = nil
local text_element = nil
local text_process = nil
local uiid = nil
local first_content_process = nil
local number_of_content = nil
local content_1 = nil
local content_2 = nil
local content_3 = nil

local click = 0

function button(e)
    if e.uielement == next_button then
        click = click + 1
    elseif e.uielement == previous_button then
        click = click - 1
    end

    if click < 1 then
        click = 1
    elseif click > number_of_content then
        click = number_of_content
    end

    Customui:setText(e.eventobjid, uiid, text_process, first_content_process .. " (".. click.. "/".. number_of_content .. ")")
    
    if click == 1 then
        Customui:setText(e.eventobjid, uiid, text_element, content_1)
    elseif click == 2 then
        Customui:setText(e.eventobjid, uiid, text_element, content_2)
    elseif click == 3 then
        Customui:setText(e.eventobjid, uiid, text_element, content_3)
    end
end

ScriptSupportEvent:registerEvent("UI.Button.Click", button)
</code>

==== Explanation ====
===Variables ===
{{:developer_center:developer_editor:script:screenshot_1724666304.png?nolink|}}

//**click**// variable: is initialized to 0 and is used to keep track of the current position or index of the content being displayed.

=== Handle when clicked on next button or previous button ===
<code LUA>
if e.uielement == next_button then
    click = click + 1
elseif e.uielement == previous_button then
    click = click - 1
end
</code>
  * In case the //**uielement**// in the event object //**e**// matches //**next_button**//, the //**click**// variable is incremented by 1.
  * Provided that matches //**previous_button**//, the //**click**// variable is decremented by 1.
  * This logic updates the //**click**// variable to reflect the user's navigation through the content.
====Ensuring click Stays Within Valid Bounds====
<code LUA>
    if click < 1 then
        click = 1
    elseif click > number_of_content then
        click = number_of_content
    end
</code>

  * On conditional that //**click**// becomes less than 1, it is set back to 1 to prevent the index from going out of range.
  * If click exceeds the value of **//number_of_content//**, it is set to **//number_of_content//**, ensuring it doesn't go beyond the last content.
==== Updating the process====
    Customui:setText(e.eventobjid, uiid, text_process, first_content_process .. " (".. click.. "/".. number_of_content .. ")")

When the player click on the next or previous button, the text's going to update
====Displaying the Corresponding Content ====
<code LUA>

if click == 1 then
    Customui:setText(e.eventobjid, uiid, text_element, content_1)
elseif click == 2 then
    Customui:setText(e.eventobjid, uiid, text_element, content_2)
elseif click == 3 then
    Customui:setText(e.eventobjid, uiid, text_element, content_3)
end
</code>
  * If //**click**// == 1, it updates the text_element with //**content_1**//.
  * If //**click**// == 2, it updates the text_element with **//content_2//**.
  * If //**click**// == 3, it updates the text_element with **//content_3//**.
This ensures that the correct content is displayed based on the current value of **//click//**.

=== Registering the Button Click Event===
<code LUA>
ScriptSupportEvent:registerEvent("UI.Button.Click", button)
</code>
This means that whenever a button in the UI is clicked, the **//button//** function will be triggered, allowing it to process the event and update the UI accordingly.

----
If you have any questions about Developer Tools, feel free to join our official discord server
 [[https://discord.gg/NVRZHBChBt|Mini World Global DEV discord]]