Giter VIP home page Giter VIP logo

biplobsd / as Goto Github PK

View Code? Open in Web Editor NEW
1.0 2.0 0.0 1.53 MB

Addition and Subtraction browser extension

Home Page: https://biplobsd.me/apps/view/as.md

License: GNU General Public License v3.0

JavaScript 0.66% TypeScript 34.47% Svelte 63.51% HTML 0.35% CSS 1.00%
daisyui firebase firebase-auth firebase-realtime-database svelte sveltekit addition-and-subtraction javascript typescript game

as's Introduction

Addition and Subtraction

logo

(AS) is a browser extension that helps you practice simple addition and subtraction expression. It is like a quiz extension.

preview_opz

Quick tutorial in 60 second (Youtube #Shorts)

Use case

Usage scenario

Case 1 - Practicing Addition and Subtraction Suppose you want to practice addition and subtraction, and also need some breaks while working in your browser. With this extension, you can easily do that. Pin it on your extension panel, then just click on the icon, and you will see a random expression and options button.

Case 2 - Increase your interactivity Suppose you want to increase your mouse or keyboard interaction. Also, you want to refresh your basic addition and subtraction skills. With this simple extension, you can do that. Just pin it on your extension panel, and then click on the icon. You will see an expression and an options button.

Installation

Edge Add-ons Chrome Web Store
Get AS from Microsoft Edge Get AS from Chrome Web Store

Or get the built zip from the release tab. Then follow the instructions in the Load unpacked extensions section. The /dist folder should be considered as the unpacked zip files.

Usages

To use the extension, open the (3+3, 5-5) (AS) icon from the extension panel. Now you will see a random expression and below are 4 buttons.

Home page

In the countdown (easy mode 30s), choose your answer. If you choose correctly, you will get 1 star. After that, you will receive a new expression. This will continue until you have failed 10 times or your countdown is over.

If you continue (easy mode 50 stars), you will have your expression numbers increased (easy mode 5) as continue.

Settings

Settings

Mode

Below are the presets for each mode.

Action Easy Medium Hard
Timeout 20s 10s 5s
Number Range 5 10 30
Increase number after N star 30 20 5
  • Mode in details

    Timeout - Countdown to choose your options within this time.

    Number Range - Numbers between the minimum and maximum values. For example, for a number range of 5, if your current score is 0, then your minimum is 0 and maximum is 5.

    Increase number after N star - After correctly answering 50 expression (in Easy mode), your base score will increase to the maximum value.

    Only (+ or -) - You can choose between only addition for (+), only subtraction for (-), or random for (+) or (-) expression.

  • Reset

    Setting - Resets only the settings. This action will not remove your star values.

    Back to First - Resets both the settings and star count to 0. This will also update the leaderboard page.

Dark or Light theme

Switch between Dark or Light themes by simply pressing the icon in the top right corner.

Theme switching

Linking your star count with Google Account

If you want to save your star count in the cloud or save your progress and settings, you need to log in to your Google account. To do this, click on the user icon located in the top right corner. On the popup window, choose your account.

Sign in with Google

Now you also use your account to other browser. Your prgress will sync automatictly.

Development

# install dependencies
npm i

# build files to `/dist` directory
# HMR for extension pages and content scripts
npm run dev

Build

# build files to `/dist` directory
$ npm run build

Load unpacked extensions

Getting Started Tutorial

  1. Open the Extension Management page by navigating to chrome://extensions.
  2. Enable Developer Mode by clicking the toggle switch next to Developer mode.
  3. Click the LOAD UNPACKED button and select the /dist directory.

Example

Related information

Donation

Buy Me A Coffee

as's People

Contributors

biplobsd avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.