<center>![](https://steemitimages.com/DQmcJ5Bgkuze2dYAr6SHxseFSVM6DsHdWbvKfFA2NgcX1u2/image.png)</center>

Some of you already might have stumbled upon this new Steem account: @the-magic-frog. *The Magic Frog* is a fun project around collaborative storytelling and maybe also promoting Steem. I want to share this project with you because maybe I could need some help with developing some features and I also want to expose this project to a greater audience, the Utopian community. Because after all... I'm really serious about this and I want it to become big. 

I highly recommend to [read the introduction post here](https://steemit.com/introduceyourself/@the-magic-frog/this-is-the-magic-story-machine-help-the-not-so-magic-frog-collaborative-storytelling-click-it-there-s-money-to-win). It was great fun to write it and it gives the project some character. But since this is a development contribution I will share some of the "technical magic" happening in the background.

### The mechanics in short:

At the very end of the introduction post you see that the first story started with "Once upon a time, there was a wizard..." and people commented how to proceed. Every day at 12:30 PM CET a new post gets published, where people can comment. The  comment with the most upvotes after 24 hours will be appended to the story in the next post. A story can end when "The End!" gets appended to the story. In the next post a new story will then start, with "Once upon a time...". (The mighty wizard is only the protagonist of the first story. For future stories it's totally up to the community.)

The rewards those posts generate are used to reward the participants and power up the account. So whenever a story ends, half of the author rewards from those posts are given back to the community. Either by raffle or splitting the pot based on how many parts a participant has contributed to the story. I haven't decided yet. Maybe a mix of both.

Once the bot account has enough Steem Power, it could maybe give small upvotes for everyone who participates and a full upvote for each winning comment. The bot also upvotes all the story posts to ensure a minimum pot. The more Steem Power it has, the bigger the minimum pot and the reward for simply participating.

Today is [day 14](https://steemit.com/themagicfrog/@the-magic-frog/the-magic-story-1-day-14) of the first story. It turns out to be exactly what I expected to happen. It starts with good and serious intentions but then drifts into a very questionable direction. Perfect!

> "Wait!" said one stork, "do we really want to see the wizard naked?" The imagery started to flow through their minds, but they figured that they would be fine.

<sup>by @enforcer48</sup>

Of course...

Read the whole current story at http://the-magic-frog.com

## The Magic Story Machine a.k.a. The Bot

https://github.com/mktcode/the-magic-story-machine

The bot is rather simple. Each post it publishes holds a `day` and a `storyNumber` in its `json_metadata`. So by looking at the last post the bot knows where we are. Each post contains the current story, as far as it has progressed, in its body between two markers. (This will probably also go into the `json_metadata`.)

It reads all the comments of the most recent post and picks the one that is valid and has the most upvotes. The voting weight or SteemPower of the voter is ignored. Whatever the community decides to append to the story gets appended in the new post.

It's a [node script](https://github.com/mktcode/the-magic-story-machine/blob/master/bot.js) and a little [helper file](https://github.com/mktcode/the-magic-story-machine/blob/master/bot.js) that uses the [steemjs](https://github.com/steemit/steem-js) library.

- [get raw data from the blockchain](https://github.com/mktcode/the-magic-story-machine/blob/master/bot.js#L12)
- [prepare data](https://github.com/mktcode/the-magic-story-machine/blob/master/bot.js#L24)
- [extract current story](https://github.com/mktcode/the-magic-story-machine/blob/master/bot.js#L62)
- [handle most upvoted comment/command](https://github.com/mktcode/the-magic-story-machine/blob/master/bot.js#L64)

#### TODO

- [prepare to get more than 100 posts](https://github.com/mktcode/the-magic-story-machine/blob/master/helper.js#L8)
- automatically raffle/distribute the generated rewards
- automatically reply to the most upvoted comment
- automatically upvote post
- publish on Twitter/Facebook

**Idea:** Maybe this approach of using comments as commands for what happens in the next post or whereever... could be a thing of it's own, a little helper class to easily configure commands and actions. But that's just an idea. Maybe someone want's to pick it up.

## The Website

http://the-magic-frog.com
https://github.com/mktcode/the-magic-frog

I created the website mainly to display the current pot value and to avoid wrongly formatted comments but actually it makes the project visible outside of Steem and so I thought maybe it can even attract some people from outside. If only the sign up process would be faster... :(

Currently the website gives a brief introduction to the project and displays the current story, its pot value and the suggestions how the story could go on. You can login via SteemConnect to vote on the story and other comments and of course write your own one.

#### Vue.js & Nuxt.js

The Website is built with [Nuxt.js](https://nuxtjs.org), a framework on top of [Vue.js](https://vuejs.org/). There is the [main page](https://github.com/mktcode/the-magic-frog/blob/master/pages/index.vue) and an [auth page](https://github.com/mktcode/the-magic-frog/blob/master/pages/auth.vue) to receive the SteemConnect access_token and safe it in a cookie.

The rest is just [fetching some async data](https://github.com/mktcode/the-magic-frog/blob/master/pages/index.vue#L192), [connecting to SteemConnect](https://github.com/mktcode/the-magic-frog/blob/master/pages/index.vue#L231) and some templating.
Well, and of course, handling the [commenting](https://github.com/mktcode/the-magic-frog/blob/master/pages/index.vue#L374) and [voting](https://github.com/mktcode/the-magic-frog/blob/master/components/LikeButton.vue#L38)... since this was the initial intention. It makes sure that a comment is not longer than 250 characters and makes it more clear how to end a story. And be careful when voting. Votes are always at 100%. ;)

**Bootstrap**

The website uses [Bootstrap-Vue](https://bootstrap-vue.js.org), a very nice bootstrap integration for Vue.js. With Nuxt.js you only need to select it on install and you are ready to go.

**Notifications**

There are currently no notifications, except for one error message. I implemented [vue-notification](http://vue-notification.yev.io/) for that. There will be more notifications, for example when your comment gets upvoted or makes it into the story or when a story ends and aaaaall the money gets distributed.

**Custom Components**

I used the component functionality only for the [Navbar](https://github.com/mktcode/the-magic-frog/blob/master/components/NavbarLoggedOut.vue), the [LikeButton](https://github.com/mktcode/the-magic-frog/blob/master/components/LikeButton.vue) and the [Commands](https://github.com/mktcode/the-magic-frog/blob/master/components/Command.vue). Everything else happens in the index file.

#### TODO

There still is a lot of room for improvements.

- Enable HTTPS
- Wallet Integration
- User Ranking
- Story Archive
- Twitter/Facebook share buttons
- Notifications
- Educational Content about Steem
- Style the [Auth Page](https://github.com/mktcode/the-magic-frog/blob/master/pages/auth.vue)... at least a little bit.

**Bye the way... Thanks a lot @wehmoen, for sponsoring the domain and the server for the website.**


# Big Plans

## Audio/Print Version

As I mentioned earlier, I want to make this project big. If it reaches a certain size and popularity and once we have generated some interesting and funny stories I can easily imagine to publish a printed version, in small numbers.

One thing I definitely want to have is an audio version. @buckydurddle, who is the voice of the [Utopian videos](https://www.youtube.com/channel/UCiVqJ8VrvjqRKuPD_Hj-6bw) already showed some interest in helping me with that! I will come back to you very soon! ;)

## Promotion

The idea was really very spontaneous and silly but people seem to enjoy it and even people outside of Steem, that I've talked to, think this is a really interesting idea, although they don't understand how on earth this can generate some revenue. I believe this project can also serve as a little promotional campaign for Steem. Therefore I need to improve the Steem-related information provided on the website. But it must be very "integrated" and fitting the project. People must not notice that this is a promotional campaign... it's my version of a trojan horse! :D

@the-magic-frog currently has less than 50 followers. I want 1000... at least! So I definitely need some influencers to promote the project. See this post as a first call for such people, but maybe there will a separate Task Request for that and other things on the list. I definitely see some stickers on traffic lights and street lights and for sure there will be banners on Facebook (if they don't ban it :D) and elsewhere.

## Other languages

Currently the project is only in English but of course, theoretically there can be a version for every language. I will take care of the German version myself very soon, but if you are interested in supporting the project in your language, you are very welcome to contact me and we can make it happen. I will cover the technical part and you can translate the background story or come up with your own.

# Support

Everyone is welcome to help the project to grow, of course! For the start the most effective way of doing this is **sharing the story posts**, upvoting them to raise the pot, and most important... **participate!**

#### Use [the website](http://the-magic-frog.com) to submit your comments and vote on other peoples ideas!

There are already two interesting suggestions today!

If you do not consider yourself to be the incarnation of creativity itself... but you also feel way to powerful, you can share some of your power and **delegate** it to the frog. I initially delegated 500 SP but I think it can be some more. Of course 50 % of the rewards will be powered up, so upvoting the story posts also helps very much... but if you want to give the frog an instant boost... feel free to delegate a little something. Maybe I can come up with a way to reward delegators as well. We'll see.

Get in touch with me on Discord: @mkt#8655

# The End! ;)

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@mkt/the-magic-frog-collaborative-storytelling-bot-and-website">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>