How to Make a Basic JavaScript Quiz
How to Make a Basic JavaScript Quiz
Making a game with JavaScript can be fun and satisfying as well as a bit of a puzzle. The code in the this article is one way of making a game using JavaScript. Once you know the basics, feel free to adapt and play around with it.
Steps

Setting Up

Set up your programming environment. You will need a text editing program to write your code in. You can write it in a notepad document but you will probably want an editor designed for programming such as Notepad++ (Windows), Atom (Mac) or Notepad (Linux). However any basic text editor does work.

Create the files you need. You will need two files: one in HTML that is read by the browser and one in JavaScript that is the game.

Set up your files and folders. Because you only need two files, you don't need any sort of complex filing system. As long as the two files are in the same level of the same folder it will work. So save both of your files in the same place. To save as html add a .html extension. Us a .js extension for the JavaScript file.Set up code in your files. The JavaScript file requires no setting up but the HTML does. In your HTML document add the following code: Page Name This is the basic set up for almost any page in HTML. defines the code as HTML to the browser. tells the browser that everything in that section is written in HTML unless specified otherwise. is a section that holds information about the page such as the title. is the name that shows up in search results and the name on the tab. <script scr="quiz.js"> is linking the JavaScript file to the HTML file. <body> holds everything that is visible on the page itself.</p><h3>Creating the Variables and Functions</h3><p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.umatno.info/news/22/13/39/221339ba4294fdeda3afec4cfe4ae5ef-entry-3.jpg" width="718" height="477" /></p><p>Start with the start function. First you will create a function called start. The rest of your game code will go in this function. This is so you can start your game using a button on your HTML page. The following code creates this function: var start = function(){ } This code creates a variable(var) named 'start':var start. This variable is a function. A variable is a key word that has a bit of data assigned to it, in this case a function. A function is a section of code that can be 'called'. When it is called it runs the code inside its {}. This is so that you don't have to write out the same thing more than once.</p><p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.umatno.info/news/f4/ec/2e/f4ec2ed76dec5cf974ddd75a4ea8e8b9-entry-4.jpg" width="718" height="477" /></p><p>Create the variables. These variables will/do contain data such as: the score, the question, and the user input. They go inside the start function's {}. var correct = 0; var incorrect = 0; var question = "none"; var input = "none"; var answer = "none"; correct: This is how many questions the user has answered correctly. incorrect: This is how many questions the user has answered incorrectly. question: This is the question that the user will be given, it will change for each new question. input:This will hold the user's answer or their 'input'. answer: This will hold the correct answer to the question. Note: when you use a variable you don't need to write var, you do this only when making the variable.</p><p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.umatno.info/news/df/e7/54/dfe75455d0c9db047e9cb6d6e3c26e38-entry-5.jpg" width="718" height="477" /></p><p>Code the ask function. The ask function asks the user the var question through a prompt. A prompt is a pop-up box that requires the user to type their answer into the box. var ask = function(){ input = prompt(question); }; Ask is a variable which is a function. The function sets the variable input to the response of the prompt containing the variable question. So in summary: The function asks the user a question in a prompt. The users response is then set to the variable input. So input is the answer that the user put.</p><p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.umatno.info/news/84/16/77/8416773bf979b18379a76c7aa4ce456b-entry-6.jpg" width="718" height="477" /></p><p>Code the score function. The score function reacts to whether the users input is correct or not. It then responds appropriately. var score = function(){ if(input == answer){ correct = correct+1; alert("correct"); }else{ incorrect = incorrect+1; alert("incorrect"); } }; The variable score is a function. if the variable input is equal to the variable answer(this is correct) the variable correct it equal to itself plus one. And it gives the user an alert that reads: 'correct'. else the variable incorrect is equal to itself plus one. And it gives the user an alert that reads: 'incorrect'. In summary: this function checks if the users input is the same as the answer, meaning it is correct. If there is a match then the amount correct goes up one and it alerts the user that their answer was correct. If there wasn't a match the amount of incorrect goes up one and it alerts the user their answer was incorrect.</p><p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.umatno.info/news/8b/8d/4d/8b8d4d130dbba4a49ac9a866e40573f6-entry-7.jpg" width="718" height="477" /></p><p>Add a function to lazy call two other functions. This will make writing up the next bit easier. var lazy = function(){ ask(); score(); }; The variable lazy is a function. When run it calls two functions: ask(); and score();. In summary: This function just calls two other functions. It means when you want to call both 'ask' and 'score,' you don't have to call them separately; you can just call 'lazy'.</p><h3>Asking the Questions</h3><p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.umatno.info/news/c1/46/3f/c1463fa33bc71686a272b30ffb10f768-entry-8.jpg" width="718" height="477" /></p><p>Write an introduction to your quiz. This could say anything. This code is a basic welcome. You don't need to have a welcome but it can be nice for the user. alert("welcome to my quiz, you will be answering 10 questions.");</p><p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.umatno.info/news/e4/83/eb/e483ebda9b5ac2da27ad1ebaefb299b0-entry-9.jpg" width="718" height="477" /></p><p>Set your variables 'question' and 'answer' to a question and answer. The following code demonstrates how. question = "What is the matrix?"; answer = "There is no spoon"; The single = assigns the thing on the right to the variable on the left. This means that the variable question now holds the text(string)"What is the matrix?". And the variable answer holds the text(string) "There is no spoon".</p><p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.umatno.info/news/c9/52/ae/c952ae05dd7a6352f3b2999667bc0261-entry-10.jpg" width="718" height="477" /></p><p>Call the function 'lazy'. This function calls the functions 'ask' and 'score'. lazy(); The function 'ask' asks the user the question and saves the users input to the variable input. The function 'score' checks if the users input matches the variable answer and changes the variables 'correct' and 'incorrect' appropriately.</p><p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.umatno.info/news/4a/ab/e2/4aabe27b8d19f886c493b2507013ef0b-entry-11.jpg" width="718" height="477" /></p><p>Continue this process to add more questions. First change the variable 'question' to your new question. Then change the variable 'answer' to the correct answer to your new question. Then run the function ask.</p><p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.umatno.info/news/d0/d1/8a/d0d18a60655318c68717d5fe9f65362e-entry-12.jpg" width="718" height="477" /></p><p>End the game when you have enough questions. This could involve telling them their score or the percentage of questions they got right. How many they got correct: alert("Well done, you got " + correct + " out of 10");</p><h3>Editing the Webpage (HTML)</h3><p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.umatno.info/news/54/8c/44/548c44c191c7cce3fe8c262d88cc4ff2-entry-13.jpg" width="718" height="477" /></p><p>Make a start button to launch the game. At the very beginning you created a function named 'start'. You want to make the quiz start on the click of a play button. In the HTML body tag add the following code. <button onClick="start()">play</button> This adds a button to your page with the word 'start' on it. When the user clicks on it it will run the function 'start'. This function contains the code of the game.</p><p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.umatno.info/news/76/61/2b/76612bfcb30e8d7b3391c28d3efaaff7-entry-14.jpg" width="718" height="477" /></p><p>Add text to the page about your game. Using the tag you can add plane text to your web page. You could warn the user that the answers are case sensitive or tell them to have a nice day. Fell free to add whatever you want to.</p><h3>Testing and Adapting Your Game</h3><p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.umatno.info/news/2e/15/ba/2e15ba2c12fa57f100c2af497d5e3c2f-entry-15.jpg" width="718" height="477" /></p><p>Test your game. Does it work how you expect?</p><p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.umatno.info/news/9e/ba/89/9eba89fca63dbc4043bdc9062106288b-entry-16.jpg" width="718" height="477" /></p><p>Adapt it. You could add more questions or messages, edit the HTML to make the page look nicer.</p> <div class="clear"></div> </section> </div> <div class="content-tags hide-mobiles"> </div> <div class="buzz-author-box center-items clearfix"> <div class="buzz-author-image"> <a href="https://umatno.info/profile/trogield"> <img src="https://cdn.umatno.info/avatars/79/5a/79/795a7980074af17d50b3ca80438838d7-b.jpg" class="avatar" width="90" height="90" alt="Trogield"> </a> </div> <div class="buzz-author-info"> <div class="buzz-author-box-name"> <h3 class="buzz-author-name fn"> <a href="https://umatno.info/profile/trogield"> Trogield </a> </h3> <div class="buzz-author-actions"> <div class="following_area184"> <a class="button button-white button-small" href="https://umatno.info/login" rel="get:Loginform"> <i class="fa fa-user-times"></i> Follow </a> </div> </div> </div> <div class="buzz-author-description"> </div> <div class="buzz-author-social"> <div class="social_links only_icons"> </div> </div> </div> </div> <section class="user-reactions" id="reactions89354"> <div class="colheader sea"> <h3 class="header-title">What's your reaction?</h3> </div> <div class="clear"></div> <div class="percentage-bar"> <div class="reaction-emoji"> <div class="bar"> <span class="reaction-percent-bar count f" data-percent="0"> <span class="count-text">0</span> </span> </div> <a class="postable" rel="nofollow" href="javascript:void();" data-method="Post" data-target="reactions89354" data-href="https://umatno.info/reactions/awesome/89354"> <img alt="AWESOME!" src="https://umatno.info/assets/images/reactions/awesome.gif" width="50" height="50"> <span class="text">AWESOME!</span> </a> </div> <div class="reaction-emoji"> <div class="bar"> <span class="reaction-percent-bar count f" data-percent="0"> <span class="count-text">0</span> </span> </div> <a class="postable" rel="nofollow" href="javascript:void();" data-method="Post" data-target="reactions89354" data-href="https://umatno.info/reactions/nice/89354"> <img alt="NICE" src="https://umatno.info/assets/images/reactions/nice.png" width="50" height="50"> <span class="text">NICE</span> </a> </div> <div class="reaction-emoji"> <div class="bar"> <span class="reaction-percent-bar count f" data-percent="0"> <span class="count-text">0</span> </span> </div> <a class="postable" rel="nofollow" href="javascript:void();" data-method="Post" data-target="reactions89354" data-href="https://umatno.info/reactions/loved/89354"> <img alt="LOVED" src="https://umatno.info/assets/images/reactions/loved.gif" width="50" height="50"> <span class="text">LOVED</span> </a> </div> <div class="reaction-emoji"> <div class="bar"> <span class="reaction-percent-bar count f" data-percent="0"> <span class="count-text">0</span> </span> </div> <a class="postable" rel="nofollow" href="javascript:void();" data-method="Post" data-target="reactions89354" data-href="https://umatno.info/reactions/loL/89354"> <img alt="LOL" src="https://umatno.info/assets/images/reactions/lol.gif" width="50" height="50"> <span class="text">LOL</span> </a> </div> <div class="reaction-emoji"> <div class="bar"> <span class="reaction-percent-bar count f" data-percent="0"> <span class="count-text">0</span> </span> </div> <a class="postable" rel="nofollow" href="javascript:void();" data-method="Post" data-target="reactions89354" data-href="https://umatno.info/reactions/funny/89354"> <img alt="FUNNY" src="https://umatno.info/assets/images/reactions/funny.gif" width="50" height="50"> <span class="text">FUNNY</span> </a> </div> <div class="reaction-emoji"> <div class="bar"> <span class="reaction-percent-bar count f" data-percent="0"> <span class="count-text">0</span> </span> </div> <a class="postable" rel="nofollow" href="javascript:void();" data-method="Post" data-target="reactions89354" data-href="https://umatno.info/reactions/fail/89354"> <img alt="FAIL!" src="https://umatno.info/assets/images/reactions/fail.gif" width="50" height="50"> <span class="text">FAIL!</span> </a> </div> <div class="reaction-emoji"> <div class="bar"> <span class="reaction-percent-bar count f" data-percent="0"> <span class="count-text">0</span> </span> </div> <a class="postable" rel="nofollow" href="javascript:void();" data-method="Post" data-target="reactions89354" data-href="https://umatno.info/reactions/omg/89354"> <img alt="OMG!" src="https://umatno.info/assets/images/reactions/wow.gif" width="50" height="50"> <span class="text">OMG!</span> </a> </div> <div class="reaction-emoji"> <div class="bar"> <span class="reaction-percent-bar count f" data-percent="0"> <span class="count-text">0</span> </span> </div> <a class="postable" rel="nofollow" href="javascript:void();" data-method="Post" data-target="reactions89354" data-href="https://umatno.info/reactions/ew/89354"> <img alt="EW!" src="https://umatno.info/assets/images/reactions/cry.gif" width="50" height="50"> <span class="text">EW!</span> </a> </div> </div> </section> <div class="content-comments"> <div id="comments-wrapper"> <div class="colheader sea"> <h3 class="header-title">Comments</h3> </div> <!-- add comment --> <div id="addComment" class="add-comment"> <form action="#" method="post" data-prepend="yes" onsubmit="return false;" onSubmit="return false;"> <div class="loader-ajax"></div> <div class="add-comment-container"> <img src="https://umatno.info/assets/images/user-avatar-s.jpg" alt="https://umatno.info/assets/images/user-avatar-s.jpg" class="usericont" /> <div class="add-comment-form"> <div> <textarea data-href="https://umatno.info/login" rel="get:Loginform" name="comment_text" cols="30" rows="10" placeholder="You must have to login to post a comment."></textarea> <div class="add-comment-form-actions"> <button type="submit" class="add_new_comment"> <div class="add-comment-loading"><img src="https://umatno.info/assets/images/ajax-loader.gif"></div> <span>Comment</span> </button> <div class="add-comment-action-inputs"> </div> </div> </div> </div> </div> </form> </div> <!-- comments --> <div id="comments"> <div class="comment-heading allcomments"> <h3 class="header-title"> <span>0 comment</span> </h3> <div class="comment-short comment_sort"> <a href="javascript:void(0);" data-sort="best">Best</a> <a href="javascript:void(0);" data-sort="old">Oldest</a> <a href="javascript:void(0);" class="active" data-sort="new">Newest</a> </div> </div> <div class="comments"> <div class="form-loader"></div> <div id="comments_list"> <div class="no-comment">Write the first comment for this!</div> </div> </div> </div> </div> </div> </div> </div> <div class="clear"></div> </article> </div> <div class="content-spinner"> <svg class="spinner-container" width="45px" height="45px" viewBox="0 0 52 52"> <circle class="path" cx="26px" cy="26px" r="20px" fill="none" stroke-width="4px"></circle> </svg> </div> </div> <div class="sidebar hide-mobile"> <div class="sidebar--fixed"> <div class="sidebar-block clearfix"> <div class="colheader rosy"> <h3 class="header-title">Today's Top <span>Posts</span></h3> </div> <br> <ol class="sidebar-mosts sidebar-mosts--readed"> <li class="sidebar-mosts__item "> <a class="sidebar-mosts__item__link" href="https://umatno.info/how-to/how-to-brew-green-tea-87520" title="How to Brew Green Tea"> <figure class="sidebar-mosts__item__body"> <div class="sidebar-mosts__item__image"> <img class="sidebar-mosts__item__image__item lazyload" src="https://umatno.info/assets/images/preloader.gif" data-src="https://cdn.umatno.info/news/df/3d/3c/df3d3c0f392bc15ca8af4be488962d3c-s.jpg" alt="How to Brew Green Tea" width="300" height="169"> </div> <figcaption class="sidebar-mosts__item__caption"> <div class="sidebar-mosts__item__view"> <span class="sidebar-mosts__item__view__count">8</span> <span class="sidebar-mosts__item__view__icon"><i class="material-icons"></i></span> </div> <h3 class="sidebar-mosts__item__title">How to Brew Green Tea</h3> </figcaption> </figure> </a> </li> <li class="sidebar-mosts__item "> <a class="sidebar-mosts__item__link" href="https://umatno.info/how-to/how-to-roast-ham-89585" title="How to Roast Ham"> <figure class="sidebar-mosts__item__body"> <div class="sidebar-mosts__item__image"> <img class="sidebar-mosts__item__image__item lazyload" src="https://umatno.info/assets/images/preloader.gif" data-src="https://cdn.umatno.info/news/89/f9/5f/89f95f1c43146bef7d5d40e73b63c203-s.jpg" alt="How to Roast Ham" width="300" height="169"> </div> <figcaption class="sidebar-mosts__item__caption"> <div class="sidebar-mosts__item__view"> <span class="sidebar-mosts__item__view__count">5</span> <span class="sidebar-mosts__item__view__icon"><i class="material-icons"></i></span> </div> <h3 class="sidebar-mosts__item__title">How to Roast Ham</h3> </figcaption> </figure> </a> </li> <li class="sidebar-mosts__item "> <a class="sidebar-mosts__item__link" href="https://umatno.info/how-to/how-to-wear-sequins-as-an-older-woman-88551" title="How to Wear Sequins As an Older Woman"> <figure class="sidebar-mosts__item__body"> <div class="sidebar-mosts__item__image"> <img class="sidebar-mosts__item__image__item lazyload" src="https://umatno.info/assets/images/preloader.gif" data-src="https://cdn.umatno.info/news/64/71/09/64710918c755ad744f5039ff26cdf208-s.jpg" alt="How to Wear Sequins As an Older Woman" width="300" height="169"> </div> <figcaption class="sidebar-mosts__item__caption"> <div class="sidebar-mosts__item__view"> <span class="sidebar-mosts__item__view__count">5</span> <span class="sidebar-mosts__item__view__icon"><i class="material-icons"></i></span> </div> <h3 class="sidebar-mosts__item__title">How to Wear Sequins As an Older Woman</h3> </figcaption> </figure> </a> </li> <li class="sidebar-mosts__item "> <a class="sidebar-mosts__item__link" href="https://umatno.info/how-to/how-to-treat-hypothyroidism-can-natural-remedies-help-88474" title="How to Treat Hypothyroidism: Can Natural Remedies Help?"> <figure class="sidebar-mosts__item__body"> <div class="sidebar-mosts__item__image"> <img class="sidebar-mosts__item__image__item lazyload" src="https://umatno.info/assets/images/preloader.gif" data-src="https://cdn.umatno.info/news/4a/b4/ba/4ab4bace88514fa16f60b6ea8613bc2f-s.jpg" alt="How to Treat Hypothyroidism: Can Natural Remedies Help?" width="300" height="169"> </div> <figcaption class="sidebar-mosts__item__caption"> <div class="sidebar-mosts__item__view"> <span class="sidebar-mosts__item__view__count">5</span> <span class="sidebar-mosts__item__view__icon"><i class="material-icons"></i></span> </div> <h3 class="sidebar-mosts__item__title">How to Treat Hypothyroidism: Can Natural Remedies Help?</h3> </figcaption> </figure> </a> </li> <li class="sidebar-mosts__item "> <a class="sidebar-mosts__item__link" href="https://umatno.info/how-to/how-to-recognize-preeclampsia-89536" title="How to Recognize Preeclampsia"> <figure class="sidebar-mosts__item__body"> <div class="sidebar-mosts__item__image"> <img class="sidebar-mosts__item__image__item lazyload" src="https://umatno.info/assets/images/preloader.gif" data-src="https://cdn.umatno.info/news/f0/51/fa/f051face9a287da72dd6de90bfa5b1f1-s.jpg" alt="How to Recognize Preeclampsia" width="300" height="169"> </div> <figcaption class="sidebar-mosts__item__caption"> <div class="sidebar-mosts__item__view"> <span class="sidebar-mosts__item__view__count">5</span> <span class="sidebar-mosts__item__view__icon"><i class="material-icons"></i></span> </div> <h3 class="sidebar-mosts__item__title">How to Recognize Preeclampsia</h3> </figcaption> </figure> </a> </li> <li class="sidebar-mosts__item "> <a class="sidebar-mosts__item__link" href="https://umatno.info/how-to/how-to-recover-from-chronic-fatigue-syndrome-89540" title="How to Recover from Chronic Fatigue Syndrome"> <figure class="sidebar-mosts__item__body"> <div class="sidebar-mosts__item__image"> <img class="sidebar-mosts__item__image__item lazyload" src="https://umatno.info/assets/images/preloader.gif" data-src="https://cdn.umatno.info/news/95/1d/8a/951d8a527b115141d433992fb836f1c0-s.jpg" alt="How to Recover from Chronic Fatigue Syndrome" width="300" height="169"> </div> <figcaption class="sidebar-mosts__item__caption"> <div class="sidebar-mosts__item__view"> <span class="sidebar-mosts__item__view__count">5</span> <span class="sidebar-mosts__item__view__icon"><i class="material-icons"></i></span> </div> <h3 class="sidebar-mosts__item__title">How to Recover from Chronic Fatigue Syndrome</h3> </figcaption> </figure> </a> </li> <li class="sidebar-mosts__item "> <a class="sidebar-mosts__item__link" href="https://umatno.info/how-to/the-12-native-american-zodiac-signs-explained-89937" title="The 12 Native American Zodiac Signs Explained"> <figure class="sidebar-mosts__item__body"> <div class="sidebar-mosts__item__image"> <img class="sidebar-mosts__item__image__item lazyload" src="https://umatno.info/assets/images/preloader.gif" data-src="https://cdn.umatno.info/news/1e/e0/46/1ee046f16d690396a5b3a782f3ec4d09-s.jpg" alt="The 12 Native American Zodiac Signs Explained" width="300" height="169"> </div> <figcaption class="sidebar-mosts__item__caption"> <div class="sidebar-mosts__item__view"> <span class="sidebar-mosts__item__view__count">4</span> <span class="sidebar-mosts__item__view__icon"><i class="material-icons"></i></span> </div> <h3 class="sidebar-mosts__item__title">The 12 Native American Zodiac Signs Explained</h3> </figcaption> </figure> </a> </li> <li class="sidebar-mosts__item "> <a class="sidebar-mosts__item__link" href="https://umatno.info/how-to/how-to-send-large-packages-88333" title="How to Send Large Packages"> <figure class="sidebar-mosts__item__body"> <div class="sidebar-mosts__item__image"> <img class="sidebar-mosts__item__image__item lazyload" src="https://umatno.info/assets/images/preloader.gif" data-src="https://cdn.umatno.info/news/7c/ed/f3/7cedf3fc72ef5a0b7b3414e95df32ae7-s.jpg" alt="How to Send Large Packages" width="300" height="169"> </div> <figcaption class="sidebar-mosts__item__caption"> <div class="sidebar-mosts__item__view"> <span class="sidebar-mosts__item__view__count">4</span> <span class="sidebar-mosts__item__view__icon"><i class="material-icons"></i></span> </div> <h3 class="sidebar-mosts__item__title">How to Send Large Packages</h3> </figcaption> </figure> </a> </li> <li class="sidebar-mosts__item "> <a class="sidebar-mosts__item__link" href="https://umatno.info/how-to/how-to-invest-for-retirement-87970" title="How to Invest for Retirement"> <figure class="sidebar-mosts__item__body"> <div class="sidebar-mosts__item__image"> <img class="sidebar-mosts__item__image__item lazyload" src="https://umatno.info/assets/images/preloader.gif" data-src="https://cdn.umatno.info/news/9e/7e/e4/9e7ee4deb3a679643a5e97de79e07982-s.jpg" alt="How to Invest for Retirement" width="300" height="169"> </div> <figcaption class="sidebar-mosts__item__caption"> <div class="sidebar-mosts__item__view"> <span class="sidebar-mosts__item__view__count">4</span> <span class="sidebar-mosts__item__view__icon"><i class="material-icons"></i></span> </div> <h3 class="sidebar-mosts__item__title">How to Invest for Retirement</h3> </figcaption> </figure> </a> </li> <li class="sidebar-mosts__item "> <a class="sidebar-mosts__item__link" href="https://umatno.info/how-to/how-to-set-up-a-fundraising-event-88154" title="How to Set up a Fundraising Event"> <figure class="sidebar-mosts__item__body"> <div class="sidebar-mosts__item__image"> <img class="sidebar-mosts__item__image__item lazyload" src="https://umatno.info/assets/images/preloader.gif" data-src="https://cdn.umatno.info/news/d3/bf/af/d3bfaffe24d9ede0b28f2fd2fe5676df-s.jpg" alt="How to Set up a Fundraising Event" width="300" height="169"> </div> <figcaption class="sidebar-mosts__item__caption"> <div class="sidebar-mosts__item__view"> <span class="sidebar-mosts__item__view__count">4</span> <span class="sidebar-mosts__item__view__icon"><i class="material-icons"></i></span> </div> <h3 class="sidebar-mosts__item__title">How to Set up a Fundraising Event</h3> </figcaption> </figure> </a> </li> </ol> </div> <div class="sidebar-block clearfix"> <div class="colheader sea"> <h3 class="header-title">Connect With Community</h3> </div> <div class="social_links"> <a href="/index.xml" class="social-rss" target="_blank" rel="nofollow"> <img width="24px" height="24px" src="https://umatno.info/assets/images/social_icons/rss.svg" alt="Subscribe to our RSS" /> <span>Subscribe to our RSS</span> </a> </div> </div> </div> </div> </div> </div> <span class="back-to-top hide-mobile"><i class="material-icons"></i></span> <div class="clear"></div> <footer class="footer-bottom category-dropdown_sec sec_cat3 clearfix clearfix"> <div class="container"> <img class="footer-site-logo" src="https://umatno.info/upload/flogo.png" width="60px" alt=""> <div class="footer-left"> <div class="footer-menu clearfix"> <ul class="level_root "> </ul> </div> <div class="footer-copyright clearfix"> Copyright © 2025 Umatno. All rights reserved. </div> </div> </div> </footer> <script> var buzzy_base_url ="https://umatno.info"; var buzzy_language ="en_US"; var buzzy_facebook_app =""; </script> <script src="https://umatno.info/assets/js/manifest.js?v=4.9.1"></script> <script src="https://umatno.info/assets/js/vendor.js?v=4.9.1"></script> <script src="https://umatno.info/assets/js/app.min.js?v=4.9.1"></script> <div id="auth-modal" class="modal auth-modal"></div> <div id="fb-root"></div> <div class="hide"> <input name="_requesttoken" id="requesttoken" type="hidden" value="SQvb9X4SBzNsCPnePtLdJgmNJlkS8sbGAS9wVRmw" /> </div> <script> var CommentsVar = { ajax: "https://umatno.info/api/comments", requestData: { _token: "SQvb9X4SBzNsCPnePtLdJgmNJlkS8sbGAS9wVRmw", post_id: "89354", }, lang: { Success: "Success", Error: "Error", Ok: "OK", Cancel: "Cancel", Edit: "Edit", EditComment: "Edit Comment", Report: "Report", ReportComment: "Report Comment", ReportPlaceholder: "Tell us why you are reporting this comment", WriteSomething: "You need to write something!", }, settings: { useUserTags: "1", } }; </script> <script src="https://umatno.info/assets/js/comments.js?v=4.9.1"></script> <script> if($(".news").length) { $(".news").buzzAutoLoad({ item: ".news__item" }); } </script> <script type="text/javascript" defer src="https://cdn.jsdelivr.net/npm/livcounter/counter.js"></script> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <script async defer src="//platform.instagram.com/en_US/embeds.js"></script> </body> </html>