

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <title>African Storybook - Rafiki ya Atieno</title>
    <link rel="stylesheet" href="css/framework7.material.min.css">
    <link rel="stylesheet" href="css/framework7.material.colors.min.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700&subset=latin,greek,greek-ext,cyrillic-ext,cyrillic,latin-ext' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,500,300,400italic,100&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='css/app.v3.min.css'>
<style>
    i.icon.icon-backGold {
        width: 24px;
        height: 24px;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M20%2011H7.83l5.59-5.59L12%204l-8%208%208%208%201.41-1.41L7.83%2013H20v-2z'%20fill%3D'%23ffc107'%2F%3E%3C%2Fsvg%3E")
    }

    </style>
</head>

<body onload="doload();">


    <div class="views">
        <div class="view view-main">
            <div class="pages navbar-fixed toolbar-fixed">
                <div data-page="index" class="page">

                    <div class="page-content" style="padding-top:0;overflow:hidden;">
                        <div id="headerBar" class="navbar reader-bar">
                            <div class="navbar-inner">
                                <div class="left" id="back-button">
                                    <a href="index.php" class="link icon-only external">
                                        <i class="icon icon-backGold"></i>
                                    </a>
                                </div>
                                <div class="center" style="color:white;">African Storybook</div>
                                <a href="#" class="right open-panel link icon-only menuA menu-b" data-panel="right"><span class="menu-text">Menu</span><i class="icon icon-more-gold menu-icon"></i></a>
                            </div>
                        </div>

                        <div class="swiper-container readerSwiper" style="top:0px;">
                            <div class="swiper-wrapper" id="storyReader"  onclick="showhideSwiperBar();">
 <div class="swiper-slide"><div class="cover-wrapper"><div id="imageBlock0" class="cover-image cB6608E" style="background-image:url(illustrations/pages/26422.png);"></div><div class="cover-content  cB6608E"><div class="noselect cover_title cB6608E ">Rafiki ya Atieno</div><div class="noselect cover_author cB6608E">Ursula  Nafula</div><div class="noselect cover_artist  cB6608E">Idowu Abayomi Oluwasegun</div></div><div class="cover-footer cB6608E_darker">Kiswahili</div></div><img src="images/asblogo.png" class="logo"><img src="images/app-c6.png" class="approved"></div><div class="swiper-slide"><div class="page-image-holder"><div  id="imageBlock1" class="page-image" style="background-image:url(illustrations/pages/26422.png);"></div></div><div id="t-1" class="page-text-story books levelFont3   noselect">Kuliishi msichana mdogo katika kijiji kimoja karibu na ziwa.<br />
<br />
Aliitwa Atieno.</div></div><div class="swiper-slide"><div class="page-image-holder"><div  id="imageBlock2" class="page-image" style="background-image:url(illustrations/pages/26423.png);"></div></div><div id="t-2" class="page-text-story books levelFont3   noselect">Babake Atieno alikuwa mvuvi mashuhuri. Alikuwa na mtumbwi wake wa kuvua samaki.<br />
<br />
Atieno alifurahi kwenda kuvua samaki na babake.</div></div><div class="swiper-slide"><div class="page-image-holder"><div  id="imageBlock3" class="page-image" style="background-image:url(illustrations/pages/26424.png);"></div></div><div id="t-3" class="page-text-story books levelFont3   noselect">Atieno aliwatazama wavulana wakicheza mpira wa miguu.<br />
<br />
"Hebu nicheze nanyi," aliwashihi siku moja.<br />
<br />
Wavulana wale walimcheka, "Nenda ukacheze kidalipo na wasichana wenzako."</div></div><div class="swiper-slide"><div class="page-image-holder"><div  id="imageBlock4" class="page-image" style="background-image:url(illustrations/pages/26425.png);"></div></div><div id="t-4" class="page-text-story books levelFont3   noselect">Wasichana nao walimwambia Atieno, "Miguu yako ni mirefu mno." Atieno alihuzunika.<br />
<br />
Atieno alianza kulichezea jua kila asubuhi.<br />
<br />
Jua likawa rafiki yake.</div></div><div class="swiper-slide"><div class="page-image-holder"><div  id="imageBlock5" class="page-image" style="background-image:url(illustrations/pages/26426.png);"></div></div><div id="t-5" class="page-text-story books levelFont3   noselect">Siku moja, jua halikuchomoza. Jogoo hawakuwika, ndege hawakuimba na watoto hawakwenda shuleni. Hata babake hakwenda kuvua samaki.<br />
<br />
Atieno alihuzunika. "Wapi rafiki yangu jua? Kwa nini leo kuna giza?"</div></div><div class="swiper-slide"><div class="page-image-holder"><div  id="imageBlock6" class="page-image" style="background-image:url(illustrations/pages/26427.png);"></div></div><div id="t-6" class="page-text-story books levelFont3   noselect">Atieno alienda kuwaambia watoto wengine namna alivyohuzunika. Lakini, walimcheka, "Labda jua limefariki. Au pengine limekutoroka."<br />
<br />
Atieno aliwajibu, "Jua ni rafiki yangu. Haliwezi kufa."</div></div><div class="swiper-slide"><div class="page-image-holder"><div  id="imageBlock7" class="page-image" style="background-image:url(illustrations/pages/26428.png);"></div></div><div id="t-7" class="page-text-story books levelFont3   noselect">Atieno alihuzunika sana hata akakimbia kwenda nyumbani. Aliugonga mpira wa kakake kwa makosa nao ulikigonga kibuyu cha mafuta.</div></div><div class="swiper-slide"><div class="page-image-holder"><div  id="imageBlock8" class="page-image" style="background-image:url(illustrations/pages/26429.png);"></div></div><div id="t-8" class="page-text-story books levelFont3   noselect">Atieno aliwaza, "Nitaucheza mpira huu hadi rafiki yangu jua litakaporudi."<br />
<br />
Aliuchukua mpira na kukimbia nao nje.</div></div><div class="swiper-slide"><div class="page-image-holder"><div  id="imageBlock9" class="page-image" style="background-image:url(illustrations/pages/26430.png);"></div></div><div id="t-9" class="page-text-story books levelFont3   noselect">Atieno alipofika nje, aliuweka mpira chini akawaza, "Ninaweza kucheza kama wao wanavyocheza."<br />
<br />
Aliugonga mpira kwa nguvu ukaruka juu angani.</div></div><div class="swiper-slide"><div class="page-image-holder"><div  id="imageBlock10" class="page-image" style="background-image:url(illustrations/pages/26431.png);"></div></div><div id="t-10" class="page-text-story books levelFont3   noselect">Kila mmoja akitazama juu, mpira ulitokomea kwenye mawingu mazito.<br />
<br />
Kulikuwa na kimya kikubwa.</div></div><div class="swiper-slide"><div class="page-image-holder"><div  id="imageBlock11" class="page-image" style="background-image:url(illustrations/pages/26432.png);"></div></div><div id="t-11" class="page-text-story books levelFont3   noselect">Ghafla, mawingu yaliyokuwa mazito yalipungua na jua likatokezea. Kijiji hicho kikawa hai tena.<br />
<br />
Kila mmoja akajitayarisha kufanya kazi aliyozoea kufanya.</div></div><div class="swiper-slide"><div class="page-image-holder"><div  id="imageBlock12" class="page-image" style="background-image:url(illustrations/pages/26433.png);"></div></div><div id="t-12" class="page-text-story books levelFont3   noselect">Atieno hakuweza kuamini kwamba alikuwa amelirejesha jua kijijini. Lakini zaidi ya yote, jua lilikuwa limerudi maishani mwake.<br />
<br />
Aliwaeleza watoto, "Rafiki yangu, jua, limerudi."</div></div><div class="swiper-slide"><div class="backcover_wrapper cB6608E"><div class="backcover_disclaimer cB6608E_darker">You are free to download, copy, translate or adapt this story and use the illustrations as long as you attribute in the following way:</div><div class="backcover_title cB6608E ">Rafiki ya Atieno</div><div class="bookcover_author"><span class="backcover_bold">Author - </span> Aisha  Nelson<br><span class="backcover_bold">Translation - </span> Ursula  Nafula<br><span class="backcover_bold">Illustration - </span> Idowu Abayomi Oluwasegun<br><span class="backcover_bold">Language - </span> Kiswahili<br><span class="backcover_bold">Level - </span> First paragraphs</div><div class="backcover_copyright">© African Storybook Initiative 2018<br>Creative Commons: Attribution 4.0<br><span class="backcover_bold">Source </span>www.africanstorybook.org</div><img src="images/logowhite.png" class="backcover_logo_right"><img src="images/asblogo.png" class="backcover_logo_left"></div></div>                            </div>
                        </div>
                        <div id="go-back" class="reader-goback" onclick="$$('.readerSwiper')[0].swiper.slidePrev();"></div>
                        <div id="go-next" class="reader-gonext" onclick="$$('.readerSwiper')[0].swiper.slideNext();"></div>
                        <!--div class="reader-showhide" onclick="showhideSwiperBar();"></div-->
                        <div id="show-bar" class="reader-showbar" onmouseenter="showhideSwiperBar();"></div>
                        <div id="rangeControl" class="swiper_scrollbar toolsbar">
                            <div style="width:100%">
                                <div class="range-item">
                                    <div class="range-slider  theme-amber">
                                        <input id="readingRange" type="range" min="0" max="" value="0" step="1" oninput="$$('.readerSwiper')[0].swiper.slideTo(this.value, 0);">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="currentPage" class="range-page"> </div>


                    </div><div data-page="controller" class="page cached">
                <div class="page-content">
                    <iframe width="100" height="100" id="bookControl" src=""></iframe>
                    <iframe width="100" height="100" id="downloadControl" src=""></iframe>
                </div>
            </div>

                </div>
            </div>
        </div>

    </div>
    <div class="panel-overlay"></div>
    <div class="panel panel-right panel-cover layout-dark" style="z-index: 11200 !important;">
        <div id="mainMenu"></div>

        <div id="readerMenu" style="display:none;">
            <div class="theme_darker_grey panelBar">Menu</div>
            <div class="list-block accordion-list  rightMenu">
                <ul id="bookPanel">

                        <li class="accordion-item">
                        <a href="#" class="item-content item-link">
                            <div class="item-inner">
                                <div class="item-title">Navigate</div>
                            </div>
                        </a>
                        <div class="accordion-item-content">
                            <div class="content-block">
                                <p>Navigate through the story by swiping right or left or clicking when the cursors changes to an arrow on the right or the left edge of the screen. </p>
                                <p>Tap or click on the centre of the page to see, or remove the menu bars at the top and the bottom of the screen. You can also use the ESC key.</p>
                                <p>You can use the slider at the bottom as a way to move quickly through the story. On a mobile device tap on the slider before you drag the slider button.</p>
                                <p>Click or tap <i class="icon icon-back"></i> to return to African Storybook.</p>
                            </div>
                        </div>
                    </li>

                    <li class="accordion-item">
                        <a href="#" class="item-content item-link">
                            <div class="item-inner">
                                <div class="item-title">Share</div>
                            </div>
                        </a>
                        <div class="accordion-item-content" style="">
                            <div class="list-block">
                                <div class="content-block" style="font-size:smaller;">If you have a Twitter or Facebook account, you can share this story on your page or a page you manage. You can also copy the web link (URL) for this story.</div>
                                <ul>

                                    <li class="item-content">
                                        <a href="https://twitter.com/share?url=https://www.africanstorybook.org/index.php?id=id=31547&
  via=africanstorybook&text=This%20is%20an%20interesting%20story:%20" target="_blank" class="item-link external">
                                            <div class="item-inner" style="padding-left: 8px;">
                                                <div class="item-title">Twitter</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="item-content">
                                        <a href="#" class="item-link external"onclick="sendFacebook(31547, 'http://www.africanstorybook.org/illustrations/covers/31547.png', 'Msichana mmoja ampata rafiki wa ajabu na anafurahia maisha kwa njia ya kipekee.');">
                                            <div class="item-inner" style="padding-left: 8px;">
                                                <div class="item-title">Facebook</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="accordion-item">
                                        <a href="#" class="item-content item-link">
                                            <div class="item-inner" style="padding-left: 8px;">
                                                <div class="item-title">Url</div>
                                            </div>
                                        </a>
                                        <div class="accordion-item-content">
                                            <div class="content-block">
                                                <div class="item-input item-input-field">
                                                    <input type="text" name="storyId" id="storyId" onClick="this.setSelectionRange(0, this.value.length)" value="www.africanstorybook.org/reader.php?id=31547">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="accordion-item" id="accordianRating">
                        <a href="#" class="item-content item-link">
                            <div class="item-inner">
                                <div class="item-title">Rate</div>
                            </div>
                        </a>
                        <div class="accordion-item-content" style="">
                            <div class="list-block inputs-list">
                                <div class="list-block inputs-list">
                                    <div class="content-block" style="font-size:smaller;">
                                        Other visitors rated this story
                                        <div class="item-title label" style="background-image: url(img/stars.png); background-repeat: no-repeat; height:24px; "><img src="img/startsactive.png" style="margin-left:-120px;">
                                                    </div><br>
                                        Tell us how much you liked the story – drag the scroller to highlight one or more stars</div>
                                    <ul>
                                        <form name="ratebookform" id="ratebookform" onsubmit="validateratebookform();" action="read/sendrating.php" method="post" >
                                            <input type='hidden' name='bookRateId' id='bookRateId' value='31547'>
                                        <li class="align-top">
                                            <div class="item-content">
                                                <div class="item-inner">
                                                    <div class="item-title label" style="background-image: url(img/stars.png); background-repeat: no-repeat; height:24px; "><img id="starsImg" src="img/startsgold.png" style="margin-left:-120px;">
                                                    </div>
                                                    <div class="item-input item-input-field">
                                                        <div class="item-input">
                                                            <div class="range-slider">
                                                                <input id="ratebookStars" name="ratebookStars" type="range" min="0" max="5" step="1" value="0" oninput="setStars(this.value);">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="align-top">
                                            <div class="item-content">
                                                <div class="item-inner">
                                                    <div class="item-input item-input-field">
                                                        <a href="#" class="button active button-fill color-amber" onclick="validateratebookform();">Submit</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        </form>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="accordion-item" id="accordianStoryComment">
                        <a href="#" class="item-content item-link">
                            <div class="item-inner">
                                <div class="item-title">Comment</div>
                            </div>
                        </a>
                        <div class="accordion-item-content" style="">
                            <div class="list-block commentsList">
                                <div class="content-block" style="font-size:smaller;">Read other people’s comments on the story, or add your own.</div>
                                <ul>

                                </ul>
                            </div>
                           <form name="bookCommentForm" id="bookCommentForm" onsubmit="validatebookcommentform();" action="read/sendcomment.php" method="post" >
                               <input type='hidden' name='bookCommentId' id='bookCommentId' value='31547'>
                                <div class="list-block inputs-list">
                                    <div class="list-block inputs-list">
                                        <ul>

                                            <li class="align-top">
                                                <div class="item-content">
                                                    <div class="item-inner">
                                                        <div class="item-title label">Enter your comment</div>
                                                        <div class="item-input item-input-field">
                                                            <textarea dir="auto" name="bookCommentComment" id="bookCommentComment" rows="4"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="item-content">
                                                    <div class="item-inner">
                                                        <div class="item-title label">Name</div>
                                                        <div class="item-input item-input-field">
                                                            <input dir="auto" type="text" name="bookCommentName" id="bookCommentName" placeholder="Required">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="item-content">
                                                    <div class="item-inner">
                                                        <div class="item-title label">E-mail</div>
                                                        <div class="item-input item-input-field">
                                                            <input type="email" name="bookCommentEmail" id="bookCommentEmail" placeholder="Required, but never shown">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="item-content">
                                                    <div class="item-inner">
                                                        <div class="item-title label"><div id="catchcode"></div></div>
                                                        <div class="item-input item-input-field">
                                                            <input id="catchcodeInput" name="catchcodeInput" type="text" placeholder="Enter the above code" class="">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>

                                            <li class="align-top">
                                                <div class="item-content">
                                                    <div class="item-inner">
                                                        <div class="item-input item-input-field">
                                                            <a href="#" class="button active button-fill color-amber" onclick="validatebookcommentform();">Post</a><!--//document.getElementById('bookCommentForm').submit();-->
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </li>

                    <li class="accordion-item"  id="accordianRelatedStories">
                        <a href="#" class="item-content item-link">
                            <div class="item-inner">
                                <div class="item-title">Translations and adaptations</div>
                            </div>
                        </a>
                        <div class="accordion-item-content">
                            <div class="list-bliock inputs-list">
                                <ul><li class="item-content">
<a href="reader.php?id=22552" class="item-link close-panel external" onclickss="loadRelatedBook(22552)"><div class="item-inner" style="padding-left: 8px;"><div class="item-title books amharic">Aku the Sun Maker<br><span style="font-size:smaller;font-weight:100;">English (Translation)</span></div></div></a></li>
<li class="item-content"><a href="reader.php?id=23686" class="item-link close-panel external" onclickss="loadRelatedBook(23686)"><div class="item-inner" style="padding-left: 8px;"><div class="item-title books amharic">Atieno's friend<br><span style="font-size:smaller;font-weight:100;">English (Adaptation)</span></div></div></a></li>

                                </ul>
                            </div>
                        </div>
                    </li>
                    <!--li class="item-content">
                        <a href="#" onclick="doDownload('id=31547', 31547, 'Rafiki_ya_Atieno');" class="item-link close-panel">
                            <div class="item-inner">
                                <div class="item-title item-pdf">Download to read<br><span style="font-weight:100;">Landscape version</span></div>
                            </div>
                        </a>
                    </li>
                    <li class="item-content">
                        <a href="#" onclick="doDownloadBooklet('id=31547', 31547, 'Rafiki_ya_Atieno');" class="item-link close-panel">
                            <div class="item-inner">
                                <div class="item-title item-pdf">Download to print<br><span style="font-weight:100;">Portrait (booklet) version</span></div>
                            </div>
                        </a>
                    </li-->
                    <li class="item-content">
                        <a href="#" onclick="doDownloadEpub(31547, 'Rafiki_ya_Atieno');" class="item-link close-panel">
                            <div class="item-inner">
                                <div class="item-title item-epub">Download EPUB</div>
                            </div>
                        </a>
                    </li>

                </ul>
            </div>
        </div>


    </div>
    <!--div class="loader theme-darker" id="progressBarsss"></div-->
    <div class="readWaitPage" style="background: rgba(0,0,0,.0);" id="progressBar">
        <div class="loader theme-darker" id="progressBarsss"></div>
        <!--div class="spinnerContainer">
            <svg class="spinner" width="32px" height="32px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
            </svg>
        </div-->
    </div>
    <script src="js/framework7.min.js"></script>
    <script type="text/javascript" src="js/enc.js"></script>
    <script type="text/javascript" src="js/app.v3.min.js"></script>
    <script type="text/javascript" src="js/hash.js"></script>

    <script>
        showLoader();
        window.fbAsyncInit = function () {
            FB.init({
                appId: '1685721771696342',
                xfbml: true,
                version: 'v2.5'
            });
        };

        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {
                return;
            }
            js = d.createElement(s);
            js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));


        (function (i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function () {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
            m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-32856255-1', 'auto');
        ga('send', 'pageview');
        var u = 'reader.php?id=31547&t=Rafiki_ya_Atieno';
        ga('set', 'page', u);
        ga('send', 'pageview');

        var $$ = Dom7;
        var myApp = new Framework7({
            modalTitle: 'African Storybook',
            material: true,
            smartSelectSearchbar: true,
            swipeBackPage: false,
            swipeBackPageActiveArea: 0
        });

        myApp.initMaterialWatchInputs();
        mainView = myApp.addView('.view-main', {
            domCache: true
        });

        $$(document).on('ajaxComplete', function (e) {
            hideLoader();
        });
        function InitReader(){
            headerShowing = true;
            document.getElementById("readerMenu").style.display = "block";
            document.getElementById("mainMenu").style.display = "none";


            document.getElementById("headerBar").style.top = "0px";
            document.getElementById("rangeControl").style.bottom = "0px";
        }

        function doload(){
            createSwiper();
            InitReader();
            readingStory = true;
            generateHash("catchcode");
            hideLoader();
        }


    </script>
</body>

</html>
